Date() method in javascript

Question

I have a Javascript countdown timer that will allow the user to enter a particular time e.g(15mins - 00:15:00). Then, the script will determine the date and time I currently have. Then, it will add 15 minutes on top of the current time and date.

For example, set time is 15 mins and the current time is 20:00:00(8pm).

The script will know that 20:15:00 is my end time and it will calculate how much time is left such as a normal timer would do.

However, if the set time has exceeded 23:00:00 (11pm since 12am is 00:00:00 military time), the date does not increment and the time normally adds up to 25:00:00++ that is now an invalid input for date and time.

Please help. How do I make the time to continue counting from 00:00:00 if it exceeds 23:00:00 at the add another day to date?

I tried using ternary operators but it doesn't work properly.

Please see my source codes for reference:

var hour = document.getElementById("hrs").value;
    var min = document.getElementById("mins").value;
    var sec = document.getElementById("sec").value;
    var newTime = new Date();
    var curr_year = newTime.getFullYear();
    var curr_Month = newTime.getMonth();
    var curr_date = newTime.getDate();
    var todayDate = (curr_year + " " + (curr_Month + 1) + " " + curr_date);
    

    newTime.setHours(newTime.getHours() + hour);
    newTime.setMinutes(newTime.getMinutes() + min);
    newTime.setSeconds(newTime.getSeconds() + sec);
    var newTime = (newTime.getHours() + parseInt(hour)) + ":" + (newTime.getMinutes() + parseInt(min)) + ":" + (newTime.getSeconds() + parseInt(sec));
    var timeDateNow = todayDate + " " + newTime;

function myTime1() {
    var hour = document.getElementById("hrs").value;
    var min = document.getElementById("mins").value;
    var sec = document.getElementById("sec").value;
    var newTime = new Date();
    var curr_year = newTime.getFullYear();
    var curr_Month = newTime.getMonth();
    var curr_date = newTime.getDate();
    var todayDate = (curr_year + " " + (curr_Month + 1) + " " + curr_date);
    
    var newTime = (((newTime.getHours() + parseInt(hour)) > 25 ? (newTime.getHours() + parseInt(hour)) - 25 : (newTime.getHours() + parseInt(hour)))
    + ":" + 
    ((newTime.getMinutes() + parseInt(min)) > 60 ? (newTime.getMinutes() + parseInt(min)) - 60 : (newTime.getMinutes() + parseInt(min))) 
    + ":" + 
    ((newTime.getSeconds() + parseInt(sec)) > 60 ? (newTime.getSeconds() + parseInt(sec)) - 60 : (newTime.getSeconds() + parseInt(sec))));

    alert(newTime);
    

    var timeDateNow = todayDate + " " + newTime;

    // alert(timeDateNow);
    $.post('updateTimerTime.php',
    {
        'timer1_update'     : true,
        'timeInitiate'      : timeDateNow
    }, function(data, status) 
    {
        // alert(data);
    });
    // alert(newTime);
    location.reload();
}
var gettingTimerTime = "<?php echo $time_1; ?>";
var countDownDate = new Date(gettingTimerTime).getTime();

var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;
    
    var hours = (Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))) < 10 ? "0"+(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))) : (Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
    var minutes = (Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))) < 10 ? "0"+(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))) : (Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
    var seconds = (Math.floor((distance % (1000 * 60)) / 1000)) < 10 ? "0" + (Math.floor((distance % (1000 * 60)) / 1000)) : (Math.floor((distance % (1000 * 60)) / 1000));
    document.getElementById("timetimer1").innerHTML = hours + ":"
    + minutes + ":" + seconds;

    if (distance < 0) {
        clearInterval(x);
    $.post('updateSwitch1.php', {
        'updateSwitchToOff1' : true
    }, function(data,status){
        // alert(status);
    });
        document.getElementById("timetimer1").innerHTML = "00:00:00";
    }
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<form method="post">
<div>
  <div class="row justify-content-center" style="
  text-align: center;margin-bottom: 20px; z-index: 1;">
<input type="number" id="hrs" value="00" style="width: 40px; text-align: center;" maxlength="2">
<input type="number" id="mins" value="00" style="width: 40px; text-align: center;" maxlength="2">
<input type="number" id="sec" value="00" style="width: 40px; text-align: center;" maxlength="2">
<input type="button" id="btnTime1" onclick="myTime1()" value="Go">

  </div>
  <div>
  </div><br>
  <div class="row" style="z-index: 1;">
    <p id="timetimer1" style="font-size: 50px; text-align: center;"></p>
  </div>
</div>
</form>

Answer 1

you do not need to ensure the date is a valid one, Date object do that by themselves e.g. :

a = new Date("2018-08-23T23:00:00")
console.log(a)

min = 75
sec = 0

a.setSeconds(a.getSeconds() + sec + min * 60)
console.log(a)

Answer 2

I have a Javascript countdown timer that will allow the user to enter a particular time e.g(15mins - 00:15:00). Then, the script will determine the date and time I currently have. Then, it will add 15 minutes on top of the current time and date.

var incr = 1000 * 60 * 15; // 15 min
var date = new Date();
var incrDate = new Date(date.getTime() + incr);

Date.prototype.getTime will give you the current datetime in milliseconds, so if you add 15 minutes worth of milliseconds and then pass that to the Date constructor you'll get a new Date object with the specified date and time.