how to hide timer when it is at 0 seconds left
<p>im having problems with removing the active classes and adding the hidden classes when the timer is at 0minutes and  0 seconds. it is supposed to be used on tablets so i recommend inspecting elements and make a smaller browser if you want to test it.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var interval;

function countdown() {
  clearInterval(interval);
  interval = setInterval( function() {
      var timer = $('.js-timeout').html();
      timer = timer.split(':');
      var minutes = timer[0];
      var seconds = timer[1];
      seconds -= 1;
      if (minutes &lt; 0) return;
      else if (seconds &lt; 0 &amp;&amp; minutes != 0) {
          minutes -= 1;
          seconds = 59;
      }
      else if (seconds &lt; 10 &amp;&amp; length.seconds != 2) seconds = '0' + seconds;

      $('.js-timeout').html(minutes + ':' + seconds);

      if (minutes == 0 &amp;&amp; seconds == 0) clearInterval(interval);

      if (minutes === 0 &amp;&amp; seconds === 0) {
         $('#gaop').removeClass('hidden').addClass('active');
            $('#beeindig').addClass('hidden').removeClass('active');
            $('#timer').addClass('hidden').removeClass('active');
            $('#knop').removeClass('begin-date').removeClass('shake');
            $('#knop-deel2').removeClass('begin-date').removeClass('shake');
            
      }



  }, 1000);
}

// $('#js-startTimer').click(function () {
//   $('.js-timeout').text("2:00");
//   countdown();
// });


// $('#js-resetTimer').click(function () {
//   $('.js-timeout').text("2:00");
//   clearInterval(interval);
// });





 $('.activate-date').click(function() {
        
        if ($('#gaop').hasClass('active')) {
           
            $('#gaop').removeClass('active').addClass('hidden');

            $('#beeindig').removeClass('hidden').addClass('active');

             $('#timer').removeClass('hidden').addClass('active');

            $('#knop').addClass('begin-date').addClass('shake');

            $('#knop-deel2').addClass('begin-date').addClass('shake');

            $('.js-timeout').text("2:00");
            countdown();

            

           



        } else {
            
            $('#gaop').removeClass('hidden').addClass('active');
            $('#beeindig').addClass('hidden').removeClass('active');
            $('#timer').addClass('hidden').removeClass('active');
            $('#knop').removeClass('begin-date').removeClass('shake');
            $('#knop-deel2').removeClass('begin-date').removeClass('shake');
            $('.js-timeout').text("2:00");
            clearInterval(interval);


        }
            
          
        
    }); </code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.wrapper{
    position: relative;
    
}

div.center{

position: absolute;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;

}

.activate-date {
    border: 4px solid grey;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 35%;
    z-index: 3;
}
p.text-hint{
    font-family: 'Opensans-regular';
    color: black;
    font-weight: 120%;
    font-size: 1.5em;
    text-align: center;
    margin: 0 auto;
    /*position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;*/
    position: fixed;
    top: 40%;
    left: 0;
    right: 0;
}

div.center div.text-timer{
    font-family: 'Opensans-regular';
    color: black;
    font-weight: 120%;
    font-size: 0.9em;
    text-align: center;
    margin: 0 auto;
    /*position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;*/
    position: fixed;
    top: 42%;
    left: 0;
    right: 0;

}


.active{
    display: block;
}

.hidden{

    display: none;
}


#knop {

 margin: 0px auto;
    height: 400px;
 width: 400px;
    border: 10px solid white;
    border-radius: 50%;
    -webkit-box-shadow: 0 0px 60px white,
             inset 0 0 60px white;
       -moz-box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            text-align: center;
    margin-top: 35%;
 }

#knop-deel2{
    margin: 0px auto;
    height: 400px;
    width: 400px;
    border: 10px solid white;
    border-radius: 50%;
    -webkit-box-shadow: 0 0px 60px white,
             inset 0 0 60px white;
       -moz-box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            text-align: center;
    margin-top: 35%;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center"&gt;
      &lt;div class="activate-date"&gt;&lt;/div&gt;
         &lt;div id="knop" class="animated ring-binnen"&gt;&lt;/div&gt;
      &lt;div id="knop-deel2" class="animated ring-buiten"&gt;&lt;/div&gt;
      &lt;p id="gaop" class="text-hint active" readonly&gt;Ga op blind meeting&lt;/p&gt;
         &lt;p id="beeindig"  class="text-hint hidden" readonly&gt;Beeindig meeting&lt;/p&gt;
         

         &lt;div id="timer" class="text-timer hidden"&gt;&lt;p&gt;de meeting eindigt in &lt;span class="js-timeout"&gt;2:00&lt;/span&gt; minuten.&lt;/p&gt;

   
     &lt;/div&gt;</code></pre>
</div>
</div>
</p>