How would i make users be able to input minutes to change the countdown time?

Question

I would like to be able to make users choose how many minutes the timer should countdown for, what should I change/add to this script? BTW I have no prior experience in Javascript and I'm learning right now, so please keep that in mind! Any help is MUCH appreciated. This is a timer that should count down minutes, this is the design I have done in html and css:

Pomodorotimerdesign

I want the users to enter a "work time" and a "break time" so that the timer counts down the work time and when thats done it automatically counts down the break time and repeat. As i said earlier this is my first "js project" so any help is much needed and appreciated!

var countDownDate = new Date("Oct 16, 2021 20:37:25").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));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

  }
}, 1000);
</script>

Here is the HTML form to select minutes:

<div class="formsss"><form action="."> <input type="number" value="1" class="TaskTime"/>Work Minutes</> <input type="number" value="1" class="BreakTime"/>Break Minutes</> <button type="submit" class="submitt">Save</button>

Grab the input through `input` tag and then use it in your javascript — testing_22, Oct 16 '21 at 19:04
@testing_22 Yeah, but how would I implement it in the JS, since im new to JS — Max328, Oct 16 '21 at 20:09
@testing_22 THIS IS THE HTML PART WITH THE FORM:
Work Minutes> Break Minutes> — Max328, Oct 16 '21 at 20:54
First of all, input element is not defined like like that, rather like `Work Minutes: ` or even better you should have a label for the input — NikoKyriakid, Oct 17 '21 at 19:41

shukru · Accepted Answer · 2021-10-17T21:13:10.447

As mentioned by @testing-22, it depends on html code but I think you need something like this:

<html>
<head>
    
    <script>
        // we need some variables to store the work and break minutes (i prefer to store them by seconds)
        var workSeconds = 120, breakSeconds = 60;
        // and a referens to interval
        var xInterval;
    
        // start function
        function start() {          
            xInterval = setInterval(workCountDown, 1000);
        }
        // stop function
        function stop() {
            clearInterval(xInterval);
        }
        // reset function; calls stop, save which re-stores the values of user inputs and then starts again.
        function reset() {
            stop();
            save();
            start();
        }
        // save function that saves the values of user inputs
        function save() {
            workSeconds = parseInt(document.getElementById("txtWorkMinutes").value)*60;
            breakMinutes = parseInt(document.getElementById("txtBreakMinutes").value)*60;           
        }
        
        // working count down function
        function workCountDown() {
            // counting down work seconds
            workSeconds--;
            // showing work seconds in "0:0" format: 
            document.getElementById("timer").innerText = Math.floor((workSeconds / 60)).toString() + ":" + (workSeconds % 60).toString();
            
            // if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
            if (workSeconds == 0) {
                console.log("relaxing...");
                clearInterval(xInterval);
                xInterval = setInterval(breakCountDown, 1000);
            }
        }
        
        // breaking count down function
        function breakCountDown() {
            // counting down break seconds
            breakSeconds--;
            // showing break seconds in "0:0" format: 
            document.getElementById("timer").innerText = Math.floor((breakSeconds / 60)).toString() + ":" + (breakSeconds % 60).toString();
            
            // if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
            if (breakSeconds == 0) {
                console.log("ready to work...");
                reset();
            }
        }
    </script>
    
</head>
<body>
    <span id="timer">00:00</span> 
    <br />
    
    <button onclick="start()">Start!</button>
    <button onclick="stop()">Stop!</button>
    <button onclick="reset()">Reset!</button>
    <br />
    
    <input type="text" id="txtWorkMinutes" value="2" /> <br />
    <span>Work Minutes</span>
    <br />
        
    <input type="text" id="txtBreakMinutes" value="1" /> <br />
    <span>Break Minutes</span>
    <br />
    
    <button onclick="save()">Save</button>
</body>
</html>

To show the timer by pad, you can have a look at Is there a JavaScript function that can pad a string to get to a determined length?

thank you so much, I am very new in JavaScript. This code works perfectly, I am going to continue to work with it and try to understand it. Is it ok if I use this code for a project, but of course change it a bit. Thank you shukru! — Max328, Oct 21 '21 at 15:03
thank you so much, am I allowed to use and modify this for a website thing im working on? im going to modify lightly as I am not that experienced with javascript, mostly modyfying it to learn and make it work with the CSS i designed. — Max328, Oct 21 '21 at 15:24

How would i make users be able to input minutes to change the countdown time?

1 Answers1