How create a countdown timer that has multiple input options

I’m trying to create a countdown timer that the input can be from three user select options (hours, minutes, and seconds), from actual hour and minute during the day (max of 90 minutes), and a simple three text box input that asks for hours, minutes, and seconds. All of these are related, so if you update one, the other ones change in order to match input. For example, if I use the time input to input a desired time, the other input options will update to match the length from when you loaded the page to what you set for the time input. Does anyone know how to do this? I don’t even know where to start, so I don’t have any code to begin with. And I need to be able to start the countdown on a button click that works with any of the input options.

1 Like

Here’s my codepen link: https://codepen.io/isaactrichka2004/pen/bGxxpOp

1 Like

I have an image of what I would like it to look like. The way the countdown works, is if just one is updated, the others will display the input that matches the length in whichever option has been updated by the user. So if I use the select option to set my timer for 1 hour and 20 minutes, the input type “time” will display what time it will be in 1 hour and 20 minutes (just an example), and the first input option (the text input), will display a 1 in the first box, a 20 in the second one, and nothing in the third one (hours, minutes, and seconds). And then the button needs to close a modal, have the option for onclick to be available to perform other functions. The button will use either a class or id to start the timer. And when the timer is done, it will use the history.back javascript thing to go back.
custom-countdown

My Codepen that I’ve linked has been updated to match the image.

Actually, just got the top two to function separately but when I update one, it doesn’t update the other to show what it would look like if I put the same amount of time in as the other one. I can’t figure out how to get the bottom most one to function properly. Help! (I updated the Codepen)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.