Countdown timer javascript mins into hours

Question

I'm a beginner in JavaScript, I wrote a countdown timer, but I don't know how to convert the mins into hours. I think its not to hard, but I can't do it, whenever I wrote new rows its not working. Here is my code:

var minutesRemaining;
var secondsRemaining;
var intervalHandle;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
  //hide pause button by default
  document.getElementById("pauseArea").style.display = "none";
  //hide resume button
   document.getElementById("resumeArea").style.display = "none";

}


function resumeCountdown() {
  tick();
  intervalHandle = setInterval(tick, 1000);
   //hide resume button when resuming
  document.getElementById("resumeArea").style.display = "none";
  //show resume button;
  document.getElementById("pauseArea").style.display = "block";
  return;
}

function pauseCountdown() {
  clearInterval(intervalHandle);
  document.getElementById("pauseArea").style.display = "none";
  document.getElementById("resumeArea").style.display = "block";
  return;
}





function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
      sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Done!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
  //show pause when running
  document.getElementById("pauseArea").style.display = "block";
}



window.onload = function () {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Idő megadása');
  //pause button
  var pauseButton = document.getElementById("pauseBtn");
  pauseButton.onclick = function() {
    pauseCountdown();
  };

  //resume button
  var resumeButton = document.getElementById("resumeBtn");
  resumeButton.onclick = function() {
    resumeCountdown();
  };
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Indítás');
  startButton.onclick = function () {
    startCountdown();
  };

  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
  document.getElementById("pauseArea").appendChild(pauseButton);
 document.getElementById("resumeArea").appendChild(resumeButton);

  //hide pause button by default
  document.getElementById("pauseArea").style.display = "none";
  //hide pause button by default
  document.getElementById("resumeArea").style.display = "none";

};

Answer 1

Here is what i just wrote really quick. It may help you. But you can just do some basic math to get your conversions and handle the remainder. Like so:

function countDown(future_date_in_millis) {

    var date = new Date();
    var current_time = date.getTime();

    //get the future date and time
    var future_date = future_date_in_millis.getTime(); //1438077258047; //date.getTime();

    // get the duration in milliseconds
    // 1 day = 86400000 millis
    var duration = future_date - current_time;

    var dd = Math.floor(duration / 86400000);
    var remainder = duration % 86400000;
    var hh = Math.floor(remainder / 3600000);
    remainder = remainder % 3600000;
    var mm = Math.floor(remainder / 60000);
    remainder = remainder % 60000;
    var ss = Math.floor(remainder / 1000);
    var days = document.getElementById("dd");
    var hours = document.getElementById("hh");
    var minutes = document.getElementById("mm");
    var seconds = document.getElementById("ss");

    days.innerHTML = dd.toString();
    hours.innerHTML = hh.toString();
    minutes.innerHTML = mm.toString();
    seconds.innerHTML = ss.toString();
}
window.setInterval(function () {
    /// call your function here
    var d = new Date("July 15, 2015 4:52:00 PM");
    countDown(d);
}, 1000);