jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<div class="Chart">
    <div class="selector">
        <div class="label">
          <span class="label-tag">Good</span>
          <!-- <span class="label-num1">10</span> - <span class="label-num2">20</span> -->
          <span class="label-num">10</span>
        </div>
        <div class="circles">
        <div class="stick"></div>
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
        </div>
    </div>

    <div class="chart-row">
      <div class="size1 sec1"></div>
      <div class="size1 sec2"></div>
      <div class="size1 sec3"></div>
      <div class="size1 sec4"></div>
      <div class="size1 sec5"></div>
      <div class="size2 sec6"></div>
    </div>
</div>


<div class="input-value" style="visibility:hidden">
Insert value 1 to 100
<input type="number" id="chart_value" min="1" max="100">
</div>

CSS

body{
  background:#243a97;
}
.Chart {
    width: 445px;
    height: 130px;
    overflow: hidden;
}
.chart-row {
    margin-top: -37px; /* -25px  */
    width:360px;
    margin-left: 42.5px;
    box-shadow: 0 0 8px 1px #000;
}
.size1{
  width:40px;
  height:25px;
  float:left;
} 
.size2{
  width:160px;
  height:25px;
  float:left;
}
.sec1{
  background:#ee3eba;
  border-radius:4px 0 0 4px;
}
.sec2{
  background:#8970cc;
}
.sec3{
  background:#10b1f9;
}
.sec4{
  background:#3ecbd4;
}
.sec5{
  background:#6cdb8f;
}
.sec6{
  background:#90e643;
  border-radius: 0 4px 4px 0;
}
.circles {
  width: 85px;
}
.circle1 {
    height: 50px;
    width: 50px;
    background: #fff6;
    border-radius: 50%;
    position: relative;
    top: 18px;
    left: 18px;
}
.circle2 {
    height: 60px;
    width: 60px;
    background: #fff6;
    border-radius: 50%;
    position: relative;
    top: -37px;
    left: 13px;
}
.circle3 {
    height: 70px;
    width: 70px;
    background: #fff6;
    border-radius: 50%;
    position: relative;
    top: -102px;
    left: 8px;
    box-shadow: 0 0 8px 2px #fff;
}
.stick {
    height: 25px;
    width: 5px;
    background: #fff6;
    position: relative;
    left: 40px;
    top: 8px;
    box-shadow: 0 -2px 6px 1px #fff;
}
.selector {
    display: block;
    height: 120px;
    width: 85px;
    overflow: hidden;
    transform: scale(0.8);
}
.label {
    color: #fff;
    font-family: Segoe UI;
    font-weight: 100;
    width: 85px;
    text-align: center;
}
.label-tag {
    text-transform: uppercase;
    display: block;
}
.input-value{
  margin-top:35px;
}

JavaScript

//$insertVal = $(this).val(); For testing width value input
    $insertVal = 20; 
    $('.label-num').text($insertVal); //Update Label 
		updateTag();
    $rowWidth = $('.chart-row').width() / 100; //Chart width proportionaly
    $rowCalc = $insertVal * $rowWidth;
		$('.selector').css({'marginLeft':'0'});
    $(".selector").animate({
        'marginLeft': '+'+ $rowCalc +'px'
    }, 500);
    
    function updateTag(){
      if (-1 < $insertVal &&  $insertVal < 26) {
        $('.label-tag').text('not good');
      }
      if (25 < $insertVal &&  $insertVal < 51) {
          $('.label-tag').text('needs improving');
        }
      if (50 < $insertVal &&  $insertVal < 76) {
          $('.label-tag').text('getting there');
        }
      if (75 < $insertVal &&  $insertVal < 101) {
          $('.label-tag').text('awesome');
        }
    }