JSFiddle - React, Tailwind, and code Playground

by anatooly

JavaScript

var timer = null; // <!--

$( document ).ready(function(){    
    $('.button-reg').click(function(){
        $("#formRegister").removeClass("hidden");
        $("#formRegister .popup").slideDown("slow");

				clearInterval(timer); // <!-- 2
        timer = startTimer(); // <!--
   
        return false;
    });
});

$(document).click( function(event){
    if(!$("#formRegister").hasClass('hidden')) {
     if( $(event.target).closest(".popup").length ) 
         return;
     $("#formRegister .popup").slideUp("slow");
     $("#formRegister").delay(800).queue(function(){$(this).addClass('hidden');$(this).dequeue();});

     clearInterval(timer); // <!-- 

     event.stopPropagation();
    }
});

function startTimer() {
  var timer = $('.js-timer').data('timer-value') || '01:30';
  var interval = setInterval(function () {
    timer = timer.split(':');
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    seconds -= 1;

    if (seconds < 0 && minutes != 0) {
      minutes -= 1;
      seconds = 59;
    } else if (seconds < 10 && length.seconds != 2) {
      seconds = '0' + seconds;
    }

    if (minutes < 10 && minutes.length != 2) {
         minutes = '0' + minutes;
    }
    
    timer = minutes + ':' + seconds;
    $('.js-timer').text(timer);
    
    if (minutes <= '00') {
        $('.js-timer').addClass('puls');
    }
    
    if (minutes <= 0 && seconds <= 0) {
      clearInterval(interval);
    }
  }, 1000);
  
  return interval; // <!--
}