jQuery addClass example

Change class name on click in jQuery

by marianico2

HTML

<div id="loansim">
  <h2>P2P Loan Simulator</h2>
  <h3 class='loti redish'>
    Loan A
  </h3>
  <table id="calc1">
    <tr>
      <td>Interest rate (%)</td>
      <td><input id="ir1" min="0" type="number" value="9.5"></td>
    </tr>
    <tr>
      <td>Avg. days of delay</td>
      <td><input id="ad1" min="0" max="1000" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Innitial ammount</td>
      <td><input id="q1" min="1" max="1000000" type="number" value="1000"></td>
    </tr>
  </table>

  <div class="strike">
    <span>vs</span>
  </div>

  <h3 class='loti yellowish'>
    Loan B
  </h3>
  <table id="calc2">
    <tr>
      <td>Interest rate (%)</td>
      <td><input id="ir2" min="0" type="number" value="11"></td>
    </tr>
    <tr>
      <td>Avg. days of delay</td>
      <td><input id="ad2" min="0" max="100" type="number" value="8"></td>
    </tr>
    <tr>
      <td>Innitial ammount</td>
      <td><input id="q2" min="1" max="1000000" type="number" value="1000"></td>
    </tr>
  </table>

  <h2>Loan profit simulation</h2>

  <div id="siimchar" style="min-width: 310px; max-width: 800px; height: 400px;"></div>
</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

<script>
  $(document).ready(function() {
    $.fn.nval = function() {
      return parseFloat(this.val())
    };


    function calc_loansim() {
      var ir1 = 30 * $('#ir1').nval() / 364 / 100,
        ir2 = 30 * $('#ir2').nval() / 364 / 100,
        q1 = $('#q1').nval(),
        q2 = $('#q2').nval(),
        ad1 = $('#ad1').nval(),
        ad2 = $('#ad2').nval(),
        arl1 = [],
        arl2 = [],
        nday1 = 0,
        nday2 = 0,
        p1 = 0,
        p2 = 0,
        tp1 = 0,
        tp2 = 0,
        nday = 30;
        
      $("#siimchar").hide();

      arl1.push([nday1, p1]);
      arl2.push([nday2, p2]);
      
   ...

CSS

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


* {
  font-family: 'Nunito'sans-serif;
}

#loansim {
  max-width: 500px;
}

#calc1,
#calc2 {
  width: 100%;
  padding: 5px;
}

.loti {
  text-align: center;
}

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.strike>span {
  position: relative;
  display: inline-block;
}

.strike>span:before,
.strike>span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: black;
}

.strike>span:before {
  right: 100%;
  margin-right: 15px;
}

.strike>span:after {
  left: 100%;
  margin-left: 15px;
}

.strike>span {
  font-style: italic;
}


#loansim input,
#loansim select{
       padding: 0px;
width: 100%;
    border-bottom: 2px solid #dbdbdb!important;
    border: none;
    border-radius: 0px;
    background: transparent;
      color: #333;
}