Creating countdown timer js

Question

I am trying to create a countdown timer based on user input in the format of MM:SS. So when the user enters 10, it will appear as 10:00. However i am struggling with the logic on how to be decrement the number in a time format. i.e: 10:00 , 9:59, 9:58 , etc etc

Areas im confused with, is structuring and configuring my code so that when "minutes" decrement by 1 ( so from 10:00 to 9:59), it will only decrement to 8 after, all 60 seconds have passed.

unfortunately, so far I am only able to print out the user input in regular numeric format like (i.e 10, 9 , 8 , 7 , 6 ..)

HTML

<div class="form-group">
  <label for="exampleFormControlInput1">Count down Timer</label>
  <input type="number" class="form-control" id="timeInputForm" placeholder="Enter time in minutes">
</div>
<!-- submit button -->
<div class="text-center">
  <button type="submit" class="btn  btn-lg btn-success">Start</button>
</div>

JQUERY/JS

$('form').on('submit', function(e){
  e.preventDefault();
  userBreakMin = parseInt($('input#timeInputForm').val()); // retrieving user input and converting from string to int  
  let userBreakType = $('#formSelectOptions option:selected').text(); // grabbing the select option text 
  countDownTimer(userBreakMin);
});


const countDownTimer = (timeInMins) => {

  let convertToMins = userBreakMin * 60;
  let minutesInputed = convertToMins/60;
  let seconds = 60;            //parseInt(convertToMins%60);
  setInterval(()=>{
    minutesInputed -=1;
    if(seconds >0){
      --seconds;
    };

    //    if(minutesInputed > 0 ){
    //      console.log(minutesInputed -=1);
    //    }
    //    if(seconds > 0 ){
    //      console.log(seconds -=1);
    //    }
  },1000);
};

Answer 1

You have to check if the seconds are at zero on each interval iteration...
Morevover, you also have to look if it is below 10, in order to add the leading zero.

And finally, you have to check if both minutes and seconds are at zero to clearInterval().

Here is an example...
Look for the comments in code. ;)

$('form').on('submit', function(e) {
  e.preventDefault();
  
  // Retrieve user input and convert to integer 
  userBreakMin = parseInt($('input#timeInputForm').val());

  // Set the start time
  $("#min").text(userBreakMin-1);
  $("#sec").text("59");
  
  // Call the function to start the interval.
  countDownTimer(userBreakMin);
});

const countDownTimer = (timeInMins) => {

  let convertToMins = userBreakMin * 60;
  
  var myCountdown = setInterval(() => {
    
    // Getting the displayed values
    var minutes = parseInt($("#min").text());
    var seconds = parseInt($("#sec").text());
    
    // The end?
    if(minutes == 0 && seconds == 0){
      clearInterval(myCountdown);
    }
    else{
      // If seconds are at 00, decrement the minutes
      if (seconds == 0) {
        seconds = 60;
        $("#min").text(minutes-1);
      }
      
      // Decrement seconds
      seconds--;

      // Leading zero for seconds below 10
      var leadingZero = "";
      if(seconds<10){
        leadingZero = "0";
      }

      $("#sec").text(leadingZero+seconds);
    }
    
  }, 1000);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Count down Timer</label>
    <input type="number" class="form-control" id="timeInputForm" placeholder="Enter time in minutes">
  </div>
  <!-- submit button -->
  <div class="text-center">
    <button type="submit" class="btn  btn-lg btn-success">Start</button>
  </div>
</form>
<br>

<span id="min">0</span>:<span id="sec">00</span>