Countdown Timer with Input Field

Question

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.

as you are counting down in seconds. save the amount of seconds left in local storage or a cookie on each tick. then $(document).ready, see if its set and if it is, start your time from the seconds left. — BenG
– BenG, Commented May 5, 2016 at 8:01

t1m0n · Accepted Answer · 2016-05-05 08:10:56Z

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>

Thank you so much for taking the time to answer and providing a solution.

Collectives™ on Stack Overflow

Countdown Timer with Input Field

1 Answer 1

Fiddle

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related