jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<div class="exercise1">
  <span class="Title">Think about 3 things your gratefull!</span>
  <span class="">Don't over think it, just think about simple things that makes your life better. Eg: Shoes, orange juice, family.</span>
  <div class="timer"><span id="count">120</span><span class="skip"></span></div>
  <div class="form-input">
    <div class=""><input type="text"></div>
    <div class=""><input type="text"></div>
    <div class=""><input type="text"></div>
    <div class="default-btn">Send</div>
  </div>
</div>
<div class="exercise2">
  <span class="Title">Write a 2 minute journal!</span>
  <span class="">Just write the first things that come to mind about your previous day.</span>
  <div class="timer"><span id="count">120</span><span class="skip"></span></div>
  <div class="form-input">
  <div class=""><textarea class="jounal-txt"></textarea></div>
    <div class="default-btn">Send</div>
  </div>
</div>
<div class="exercise3">
  <span class="Title">Write a 2 minute journal!</span>
  <span class="">Just write the first things that come to mind about your previous day.</span>
  <div class="timer"><span id="count">120</span><span class="skip"></span></div>
  <div class="">
    <img src="https://www.duffthepsych.com/wp-content/uploads/2016/07/478Breathe500x500c129revised.gif">
  </div>
</div>
<div class="exercise4">
  <span class="Title">Write a 2 minute journal!</span>
  <span class="">Just write the first things that come to mind about your previous day.</span>
  <div class="timer"><span id="count">120</span><span class="skip"></span></div>
  <div class="form-input">
  <div class=""><input type="text" placeholder="To Email"></div>
  <div class=""><input type="text" placeholder="From Email"></div>
  <div class=""><input type="text" placeholder="Subject"></div>
  <div class=""><textarea class="jounal-txt"></textarea></div>
    <div class="default-btn">Send</div>
  </div>
</div>
<div class="exercise5">
  <span class="Title">Workout for a little bit!</span>
 ...

CSS

.exercise1, .exercise2, .exercise3, .exercise4, .exercise5{
  display:none;
}
.Title{
  display:block;
  text-align:center;
  font: bold 15px/13px Helvetica, Verdana, Tahoma;
}
.timer {
    border: 5px solid #efefef;
    border-radius: 85px;
    color: #00adff;
    font: bold 150px/130px Helvetica, Verdana, Tahoma;
    height: 145px;
    max-width: 300px;
    min-width:160px;
    padding: 21px 3px 0 3px;
    text-align: center;
    margin: 5px;
}
.form-input{
  display:none;
}
.form-input input, .jounal-txt{
  height: 35px;
  margin: 15px;
  width: 60%;
}
.skip {
    background: #0091d6;
    height: 50px;
    width: 50px;
    position: absolute;
    border-radius: 50%;
    top: 180px;
    margin-left: 50px;
}

JavaScript

var counter = 900;

  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    // Display 'counter' wherever you want to display it.
    if (counter === 0) {
        $('.form-input').show();
        clearInterval(counter);
    }
    
  }, 1000);
  
  $('.skip').on('click', function(){
  	$('.timer').hide();
    $('.form-input').show();
  })