Salary Calculator

by Zsanett Tamás

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="calculator-page">
  <section class="container-fluid darker-gradient-background">
    <div class="container pb-3">
      <form action="" novalidate>
        <div class="row">
          <div class="col-12 col-md-6 pt-5">
            <div class="form-group mb-0 pt-5">
              <h4 class="text-uppercase text-white pt-5"><strong>Válassza ki a kívánt kalkulátort!</strong></h4>
              <ul class="ml-0 mb-5 mt-3 nav" id="calculatorTabs" role="tablist">
                <li class="custom-control custom-radio custom-control-inline mr-5 active">
                  <input type="radio" class="custom-control-input" id="net3" name="calc" value="2" checked>
                  <label class="custom-control-label pointer-event pr-1 text-white text-uppercase" for="net3">
                    <strong>Nettó</strong>
                  </label>
                </li>
                <li class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="vat" value="1" name="calc">
                  <label class="custom-control-label text-white text-uppercase" for="vat">
                    <strong>Bruttó</strong>
                  </label>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <img class="float-right img-fluid pt-5" src="https://images.vexels.com/media/users/3/129697/isolated/preview/2cf64de279ce43f6c0b27d81656f2fbb-calculator-circle-icon-3-by-vexels.png" width="150" alt="Bérkalkulátor">
          </div>
        </div>
        <div id="calcContent">
          <div id="calcPanel-A">
            <div class="row mt-5">
              <div class="col-12">
                <div class="calc-card card...

SCSS

/* @import "~bootstrap-cookie-alert/cookiealert.css";
@import "~bootstrap-select/dist/css/bootstrap-select.css";
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import '~@fortawesome/fontawesome-free/scss/solid'; */

@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Vidaloka');

$green: #00cb9f;
$cloud-blue: #548494;
$disabled-grey: #d6d8da;
$white: #fff;
$black: #000;
$calc-border-radius: 15px;
$lighter-purple: #f8e1ff;
$light-purple: #9575a4;
$sea-blue: #14a6ca;


$font-family-base: 'Quicksand',
sans-serif;
$font-family-second: 'Vidaloka',
serif;

.darker-gradient-background {
  background: rgb(149, 117, 164);
  background: linear-gradient(#00cb9f 15%, #E1E3E7 65%) no-repeat 50% 50%/100% 100%
}

.dark-green-text {
  color: $green;
}

/* fourth button */
.prod-fourth-btn.btn-outline-light {
  color: $green;
  border-radius: 10px;
  border: 1px solid $green;
  padding: 18px;
  margin-bottom: 4px;
  background-color: transparent;

  &:hover,
  &.hover,
  &.active,
  &:active,
  &.focus,
  &:focus,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    background: $green;
    color: $white !important;
    border: 3px solid $white;
    font-weight: 900;
    margin-bottom: 0;
    outline: 0;
  }
}

/* CALCULATOR */

.calculator-page {
  h4 {
    font-family: $font-family-second;
  }
  .calc-card {
    background-color: darkgrey;
    &.card {
      border: none;
      border-radius: calc(0.5rem - 1px);

      .card-header {
        background-color: $cloud-blue;
        padding: 1.3rem 3.25rem;
        border-bottom: none;
        border-radius: calc(0.5rem - 1px);
      }

      .info {
        margin-left: -35px;
      }
    }
  }

  .card {
    p {
      font-size: 1.2rem;
    }
  }

  .form-control {
    text-align: right;
    color: $black;
    font-weight: bold;

    .filter-option-inner {
      text-align:...

JavaScript

function calculatorActiveLinks() {
  $('#calcTabs li a').on('click', function() {
    $('#calcTabs li').removeClass("active");
    $(this).parent('li').addClass("active");
  });
}

function blockToggleAnimate() {
  let displayElements = $('.display-row');
  displayElements.hide();
  $(".click").on('click', function() {
    $(this).closest("section").find(displayElements).first().slideToggle('slow');
  });
}

/* Calculator page */
function showCalculatorContent() {
  let tabA = $('#calcPanel-A');
  let tabB = $('#calcPanel-B');
  tabA.hide();
  $('#calculatorTabs .custom-radio input:radio').change(function() {
    if ($(this).val() === '1') {
      tabA.show();
      tabB.hide();
    } else {
      tabA.hide();
      tabB.show();
    }
  });
}


let selectOption2 = $('.custom-select2');

function addInputValue() {
  selectOption2.on('change', function() {
    if ($(this).val() === '2') {
      $('.tax-discount').val(taxDiscount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
    } else {
      $('.tax-discount').val(" ");
    }
  });
}

function calcThisNumberNetValue(netTabFirstInputNumber) {
  if (isNaN(netTabFirstInputNumber) === true) {
    return 'Csak szamot tartalmazhat!';
  } else if (netTabFirstInputNumber > 0) {
    var net = Math.round(netTabFirstInputNumber - (netTabFirstInputNumber * (0.15 + 0.04 + 0.03 + 0.1 + 0.015)));
    return net;
  }
}

function calcThisNumberVatValue(grossTabFirstInputNumber) {
  if (isNaN(grossTabFirstInputNumber) === true) {
    return 'Csak szamot tartalmazhat!';
  } else if (grossTabFirstInputNumber > 0) {

    var net = grossTabFirstInputNumber / 0.665;
    var gross = Math.round(grossTabFirstInputNumber + (net * (0.15 + 0.04 + 0.03 + 0.1 + 0.015)));
    return gross;
  }
}

let child_0 = 0;
let child_1 = 66670;
let child_2 = 133330;
let child_3 = 220000;
let child_4 = 220000;
let child_5 = 220000;

let maxMarriedDiscount = 33335;
let taxDiscount = 7450;

function calculatorFunctions() {
  //disabled next inputs
 ...