CODEWITHSUNDEEP
javascriptalgorithm
NZMAI
NZMAI

Reputation: 546

Implementing reset button for countdown timer

Hello guys as a beginner i have not learned yet how to write a good code, so it is not refactored one, and it is actually spagetti code. Anyway i want to learn to code, so in my project (i modify someone's code) i have two ways to set a timer: 1. By clicking a button on navigation menu, like in the picture below. enter image description here 2. By inputing, like in the picture below. enter image description here

The issue is i call timer function two times 

reset.addEventListener('click', function() {
  timer(mins * 60);
  timer(seconds);
});

one for quick buttons

var quickTime = function() {
  seconds = parseInt(this.dataset.time);
  timer(seconds);
}

buttons.forEach((button) => button.addEventListener('click', quickTime));

and one for input. 

buttons.forEach((button) => button.addEventListener('click', quickTime));
document.customFormSession.addEventListener('submit', function(e) {
  e.preventDefault();
  mins = this.minutesSession.value;
  displayTimerLeftSession(mins * 60);
  timer(mins * 60);
  this.reset();

});

And it makes sense why it does not work properly because one overrides another. I think one option would be check if a quick button has a particular class call timer(seconds), else call timer(mins*60). However i'm not sure if it will work, moreover i do not know how to implement it, and do not know where to put this code if it is indeed correct algorithm. Please if you know i would be glad to hear your suggestions. If you can implement it feel free to fork the project, it would be even more useful. Thanks in advance!

Upvotes: 2

Views: 208

Answers (2)

Nelson Yeung
Nelson Yeung

Reputation: 3392

If I understood your question correctly, you want to have the reset button to reset to the correct time for both methods of starting the timer?

Summary and quick fix:

Just add seconds = mins * 60 to your customFormSession event listener:

document.customFormSession.addEventListener('submit', function(e) {
  e.preventDefault();
  mins = this.minutesSession.value;
  seconds = mins * 60
  displayTimerLeftSession(mins * 60);
  timer(mins * 60);
  this.reset();
});

Explanation:

You are simply storing the timer in a global variable called seconds. This variable is set for your quick time button click event listener but not for your form submit as stated in the summary.

To be honest, I don't think you even need the mins variable:

document.customFormSession.addEventListener('submit', function(e) {
  e.preventDefault();
  seconds = this.minutesSession.value * 60;
  displayTimerLeftSession(seconds);
  timer(seconds);
  this.reset();
});

My fork of your project

Upvotes: 1

kraskevich
kraskevich

Reputation: 18566

You can create a function that takes the the timeout as an argument and returns a callback that starts the timer when it's called. Something like this:

var createTimerCallback = function (duration) {
    return function () {
        // Starts a timer for the duration seconds
    }
};

You need to attach the return value of this function to all "quick" buttons:

var durations = [5 * 60, 10 * 60, 15 * 60]; // Or any other constants you need
var buttons = ... // Your "quick" buttons
for (var i = 0; i < duration.length; i++) {
    buttons[i].on('click', createTimerCallback(duration[i])); 
}

This way, the duration get captured for each button and doesn't change.

You can keep handling the form the way you do it now: get the number of minutes from the input field and start a timer with the specified duration.

Upvotes: 1

Related Questions