Countdown Timer with Input Field

Nina Published at Dev

Nina

I'm sure someone already figured this out, but I couldn't seem to have found it on my end.

What I have is a pretty basic countdown where a user puts the amount of minutes into the input field, click the button, and it counts down the minutes.

What I would like to know is for just the countdown to ignore the page when it refreshes (to just continue on as it was). At the moment, it just stops the countdown.

Here is what I have so far.

HTML:

<form>
<input id="tminus" placeholder="0:00"></input>
<input id="request" placeholder="Enter Minutes here"></input>
<a href="#" class="button enterTime">Submit Time</a>
 <input type="reset" value="Clear form" />
</form>

JS:

$('.enterTime').click(function () {
    var reqVal = $('#request').val();
    var parAmt = parseInt(reqVal);
    var totalAmount = parAmt * 60;
     $('#request').val(" ");

    var timeloop, timeSet = function () {

        totalAmount--;

        var minutes = parseInt(totalAmount/60);
        var seconds = parseInt(totalAmount%60);

        if(seconds < 10)
            seconds = "0"+seconds;
        $('#tminus').val(minutes + ":" + seconds);
    };

    var timeloop  = setInterval(timeSet, 1000);

})

Thank you for all the help.

t1m0n

You can save totalAmount to localStorage and get value from there when user refreshes the page. Heres around what you need:

Fiddle

// Get totalAmount from localStorage and if there is positive value call timeSet() immediately
var totalAmount = localStorage.getItem('countDown') || 0,
    timeloop;

if (totalAmount) {
    timeSet()
}

function timeSet () {
    totalAmount--;
    // Refresh value in localStorage
    localStorage.setItem('countDown', totalAmount);

     // If countdown is over, then remove value from storage and clear timeout
     if (totalAmount < 0 ) {
         localStorage.removeItem('countDown');
         totalAmount = 0;
         clearTimeout(timeloop);
         return;
     }

    var minutes = parseInt(totalAmount/60);
    var seconds = parseInt(totalAmount%60);

    if(seconds < 10)
        seconds = "0"+seconds;

    $('#tminus').val(minutes + ":" + seconds);

    timeloop = setTimeout(timeSet, 1000);
}

$('.enterTime').click(function () {
    var reqVal = $('#request').val();
    var parAmt = parseInt(reqVal);

    if (timeloop) {
        clearTimeout(timeloop)
    }

    totalAmount = parAmt * 60;

    $('#request').val(" ");

    timeSet();
})

// Clear timeout and remove localStorage value when resetting form
$('#countdown').on('reset', function () {
    totalAmount = 0;
    clearTimeout(timeloop);
    localStorage.removeItem('countDown');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="countdown">
    <input id="tminus" placeholder="0:00" />
    <input id="request" placeholder="Enter Minutes here" />
    <a href="#" class="button enterTime">Submit Time</a>
    <input type="reset" value="Clear form" />
</form>

Collected from the Internet

Please contact [email protected] to delete if infringement.