Search code examples
javascripthtmlfunctionfor-loopcountdown

CountDown Script, Doesn't display or countdown correctly


so I've been tyring to debug my script for my pomodoro(tomato) clock. What I want this script to do is it will recieve input(in minutes). Right now what my script is doing is counting down by 5 instead of 1 seconds. Also it will not display the minutes like I want it too.

I made the script in a logical way to log to console and test it. What I see in the console is it displays every second, but it displays 5 seconds every second if that makes sense. Here is the jsbin: https://jsbin.com/gigohajawo/3/edit?js,consolehttps://jsbin.com/gigohajawo/3/edit?js,console

Here is the code, any help would be appreciated!!!

//makes sure the page is loaded first
$(document).ready(function() {
    //global variables
    //grabs text of an id and converts it to an int
    var countMin = 5;
    var count1 = 60;


    //when button id "but" is clicked...

       //while page is up, it keeps track each second that has passed
       for(; countMin >=0;countMin--){
            var counter1 = setInterval(function(){
                //calls timer function to count down
                 count1 = Timer(count1,counter1,countMin);
            },1000);
          count1 =60;
        }



    //counts down
    function Timer(count,counter,minutes){
        count--;
        //once it hits 0 seconds, the interval will stop counting
        if(count <=0){
            clearInterval(counter); 
            return count;
        }

        //displays the countdown
        if(minutes < 10){
            if(count < 10){
                console.log("0:0" + count);
            } else {
                console.log("0:" + count);
            }
        }else if(minutes > 0 && minutes < 10){
            if(count < 10){
                console.log("0" + minutes +":0" + count);
            } else {
               console.log("0"+minutes+":" + count);
            }
        } else{
            if(count < 10){
                console.log(minutes+":0" + count);
            } else {
               console.log=minutes+":" + count;
            }
        }

        return count;
    }

});

Solution

  • This JSBin seems to do what you intended.

    The code:

    //makes sure the page is loaded first
    $(document).ready(function() {
        //global variables
        //grabs text of an id and converts it to an int
        var count1 = 120;
    
        // Call a function every 1000 milliseconds (1 second)
        var counter1 = setInterval(function() {
          count1 = Timer(count1, counter1);
        }, 1000);
    
    
        //counts down
        function Timer(count,counter){
            // Decrement the seconds counter
            count--;
    
            // Get the minutes and seconds in whole numbers
            var minutes = Math.floor(count / 60);
            var seconds = count % 60;
    
            // Once it hits 0 seconds, the interval will stop counting
            if(count <=0){
                clearInterval(counter);     
            }
    
            // Pads the seconds with a 0
            if (seconds < 10) {
              seconds = "0" + seconds;
            }
    
            // Pads the minutes with a 0
            if (minutes < 10) {
              minutes = "0" + minutes;
            }
    
            //displays the countdown
            console.log(minutes + ":" + seconds)
    
            return count;
        }
    
    });
    

    Please note:

    1. Since you have defined count1 as a global variable you do not need to pass it into Timer
    2. The same goes for counter1

    If I was rewriting it I would do something like this:

    //makes sure the page is loaded first
    $(document).ready(function() {
        var timeInSeconds = 120;
    
        var timeCounter = setInterval(function() {
          timeInSeconds--;
    
          // If we hit 0 seconds clear the timer
          if (timeInSeconds <= 0) {
            clearInterval(timeCounter);
          }
    
          // Display the current time
          displayTime();
        }, 1000);
    
    
        function displayTime(){
            // Get the minutes and seconds in whole numbers
            var minutes = Math.floor(timeInSeconds / 60);
            var seconds = timeInSeconds % 60;
    
            // Pad with zeros using the Ternary operator
            seconds = (seconds < 10) ? "0" + seconds : seconds;
            minutes = (minutes < 10) ? "0" + minutes : minutes;
    
            // Display the countdown
            console.log(minutes + ":" + seconds)
        }
    
    });