Javascript Egg Timer

Question

Javascript Egg Timer

I am currently in the process of developing a unique egg timer application that allows users to input values through various form select tags. However, I have encountered a NaN error when trying to set the timer with the JavaScript code provided below. Here is a section of the HTML and the JavaScript code I am working on:

<html>
<head>
<script language = "javascript" type = "text/javascript">

var minutes

var miuntes=setInterval(timer, 1000); //1000 will run it every 1 second

function timer(m)
{
  minutes = m;
  minutes=minutes-1;
  if (minutes <= 0)
  {
     clearInterval(minutes);
     //timer ended, do something here
     return;
  }

 document.getElementById("txt").innerHTML=minutes + "minutes"; 
}

function checktimer()
{

var checkbox1 = form.preference.value;
var checkbox2 = form.eggsize.value;
var checkbox3 = form.suacepansize.value;

if(checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1)
{
m = 3;
s = 0;
}

timer(m);
}

</script>

</head>
<body>
<div id = "txt"> </div>

    <form id="form" onclick ="checktimer()">

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 1 </h2></div>
    <div class="question-text"><h6>How do you like your egg? </h6> </div>
    <select id="prefernce" name ="preference">
  <option value="1">Soft</option>
  <option value="2">Medium</option>
  <option value="3">Hard</option>
</select>

    </div> 

<div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 2 </h2></div>
    <div class="question-text"><h6>What size is your egg? </h6> </div>
    <select id="eggsize" name = "eggsize">
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="3">Large</option>
</select>

    </div>

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 3 </h2></div>
    <div class="question-text"><h6>What size is the saucepan? </h6> </div>
    <select id="saucepansize" name = "suacepansize">
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="3">Large</option>
</select>

    </div>

        <div class = "question">
            <input type="submit" id="button" name="submit" value = "Go" onclick="checktimer()"/> <br/> 
        </div>

    </form>

    </div>

</body>
</html>

javascript

Answer 1

Answer №1

Here are the alterations I've made:

I adjusted the event from onclick to onsubmit, and now the function returns false to prevent the form from submitting.
The interval initiates when the page loads, which causes it to clear instantly - so I began the interval from the onsubmit handler.
To avoid confusion with two variables named "minutes," one of which was incorrectly spelled, I gave the interval variable a new name.
The argument m is no longer necessary since you have a global minutes variable.

Note: Currently, the countdown ticks down at a rate of one minute per second - for a slower pace, consider multiplying the minutes by 60 and counting in seconds or firing the interval once per minute.

Below is the revised script:

<html>
<head>
<script type="text/javascript">
var minutes = 0;
var interval;

function timer() {
  minutes = minutes - 1;

  document.getElementById("txt").innerHTML= minutes + " minutes"; // check spelling

  if (minutes <= 0) {
     //counter ended, do something here
     window.clearInterval(interval);
     return;
  }
}

function checktimer() {
    var checkbox1 = form.preference.value;
    var checkbox2 = form.eggsize.value;
    var checkbox3 = form.suacepansize.value;

    if(checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) {
        minutes = 3;
        s = 0;
    }

    interval = setInterval(timer, 1000);

    return false;
}
</script>
</head>
<body>
<div id = "txt"> </div>

    <form id="form" onsubmit="return checktimer()">

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 1 </h2></div>
    <div class="question-text"><h6>How do you like your egg? </h6> </div>
    <select id="prefernce" name ="preference">
  <option value="1">Soft</option>
  <option value="2">Medium</option>
  <option value="3">Hard</option>
</select>
    </div> <!--Ends the question div-->

...
(Note: The rest of the HTML code remains unchanged)

Answer 2

Here are the alterations I've made:

I adjusted the event from onclick to onsubmit, and now the function returns false to prevent the form from submitting.
The interval initiates when the page loads, which causes it to clear instantly - so I began the interval from the onsubmit handler.
To avoid confusion with two variables named "minutes," one of which was incorrectly spelled, I gave the interval variable a new name.
The argument m is no longer necessary since you have a global minutes variable.

Note: Currently, the countdown ticks down at a rate of one minute per second - for a slower pace, consider multiplying the minutes by 60 and counting in seconds or firing the interval once per minute.

Below is the revised script:

<html>
<head>
<script type="text/javascript">
var minutes = 0;
var interval;

function timer() {
  minutes = minutes - 1;

  document.getElementById("txt").innerHTML= minutes + " minutes"; // check spelling

  if (minutes <= 0) {
     //counter ended, do something here
     window.clearInterval(interval);
     return;
  }
}

function checktimer() {
    var checkbox1 = form.preference.value;
    var checkbox2 = form.eggsize.value;
    var checkbox3 = form.suacepansize.value;

    if(checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) {
        minutes = 3;
        s = 0;
    }

    interval = setInterval(timer, 1000);

    return false;
}
</script>
</head>
<body>
<div id = "txt"> </div>

    <form id="form" onsubmit="return checktimer()">

    <div class = "question">
    <div class="circle"> <h2 class = "whiteh2"> 1 </h2></div>
    <div class="question-text"><h6>How do you like your egg? </h6> </div>
    <select id="prefernce" name ="preference">
  <option value="1">Soft</option>
  <option value="2">Medium</option>
  <option value="3">Hard</option>
</select>
    </div> <!--Ends the question div-->

...
(Note: The rest of the HTML code remains unchanged)

Answer 3

Answer №2

let minutes = setInterval(timer, 1000);

The issue in your code is that you haven't passed any arguments to the function timer, causing the variable m to be undefined. When undefined is used in arithmetic operations with numbers, it results in NaN, which explains the problem you are facing. To pass an argument to your function, you need to wrap the timer call in a function expression:

let minutes = setInterval(function() {
    timer( ... );
}, 1000);

Replace ... with the desired number input for the function timer.

Additionally, there is a typo in the variable declaration where you spelled minutes incorrectly. Lastly, make sure to include the closing </script> tag.

Answer 4

let minutes = setInterval(timer, 1000);

The issue in your code is that you haven't passed any arguments to the function timer, causing the variable m to be undefined. When undefined is used in arithmetic operations with numbers, it results in NaN, which explains the problem you are facing. To pass an argument to your function, you need to wrap the timer call in a function expression:

let minutes = setInterval(function() {
    timer( ... );
}, 1000);

Replace ... with the desired number input for the function timer.

Additionally, there is a typo in the variable declaration where you spelled minutes incorrectly. Lastly, make sure to include the closing </script> tag.

Answer 5

Answer №3

edit

var miuntes=setInterval(timer, 1000);

changing it to

var minutes=setInterval(timer, 1000);

and give it a shot

Answer 6

edit

var miuntes=setInterval(timer, 1000);

changing it to

var minutes=setInterval(timer, 1000);

and give it a shot

Answer 7

Answer №4

Counting down to ensure all answers are complete

function initiateTimer(minutes, elementID, onFinish) {
    var countDown = minutes * 60 * 1000;
    var time = new Date(0, 0, 0, 0, 0, 0);
    time.setTime(countDown);

    function count(t) {
        if (countDown > 0) {
            countDown -= 1000;
            time.setTime(countDown);
            document.getElementById(elementID).innerHTML = (time.getHours() - 1) + ":" + time.getMinutes() + ":" + time.getSeconds();
        } else {
            clearInterval(interval);
            onFinish();
        }
    }

    var interval = setInterval(count, 1000);
}

initiateTimer(1, "Time", function () { 
    alert("Timer Completed");
});

Check out this JSBin example

In summary:

<head>
    <script language="javascript" type="text/javascript">
        function startTimer(minutes, elementID, onFinish) {
            var countDown = minutes * 60 * 1000;
            var time = new Date(0, 0, 0, 0, 0, 0);
            time.setTime(countDown);

            function count(t) {
                if (countDown > 0) {
                    countDown -= 1000;
                    time.setTime(countDown);
                    document.getElementById(elementID).innerHTML = (time.getHours() - 1) + ":" + time.getMinutes() + ":" + time.getSeconds();
                } else {
                    clearInterval(inter);
                    onFinish();
                }
            }

            var inter = setInterval(count, 1000);
        }

        function validateTimer() {

            var checkbox1 = form.select1.value;
            var checkbox2 = form.select2.value;
            var checkbox3 = form.select3.value;

            if (checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) {
                minutes = 3;
              seconds = 0;
            }

            startTimer(minutes, "txt", function () {
                alert("Egg is ready")
            });

        }
    </script>
</head>

<body>
    <div id="txt"></div>
    <form id="form" onclick="validateTimer()">
        <div class="question">
            <select id="select1" name="select1">
                <option value="1">Soft</option>
                <option value="2">Medium</option>
                <option value="3">Hard</option>
            </select>
        </div>
        
        <div class="question">
            <select id="select2" name="select2">
                <option value="1">Small</option>
                <option value="2">Medium</option>
                <option value="3">Large</option>
            </select>
        </div>
        
        <div class="question">
            <select id="select3" name="select3">
                <option value="1">Small</option>
                <option value="2">Medium</option>
                <option value="3">Large</option>
            </select>
        </div>
        
        <div class="question">
            <input type="button" id="button" name="submit" value="Go" onclick="validateTimer()"
            />
            <br/>
        </div>
    </form>
    </div>
</body>

Here's another JSBin demo

You can adjust the timer format and egg readiness times as needed

Answer 8

Counting down to ensure all answers are complete

function initiateTimer(minutes, elementID, onFinish) {
    var countDown = minutes * 60 * 1000;
    var time = new Date(0, 0, 0, 0, 0, 0);
    time.setTime(countDown);

    function count(t) {
        if (countDown > 0) {
            countDown -= 1000;
            time.setTime(countDown);
            document.getElementById(elementID).innerHTML = (time.getHours() - 1) + ":" + time.getMinutes() + ":" + time.getSeconds();
        } else {
            clearInterval(interval);
            onFinish();
        }
    }

    var interval = setInterval(count, 1000);
}

initiateTimer(1, "Time", function () { 
    alert("Timer Completed");
});

Check out this JSBin example

In summary:

<head>
    <script language="javascript" type="text/javascript">
        function startTimer(minutes, elementID, onFinish) {
            var countDown = minutes * 60 * 1000;
            var time = new Date(0, 0, 0, 0, 0, 0);
            time.setTime(countDown);

            function count(t) {
                if (countDown > 0) {
                    countDown -= 1000;
                    time.setTime(countDown);
                    document.getElementById(elementID).innerHTML = (time.getHours() - 1) + ":" + time.getMinutes() + ":" + time.getSeconds();
                } else {
                    clearInterval(inter);
                    onFinish();
                }
            }

            var inter = setInterval(count, 1000);
        }

        function validateTimer() {

            var checkbox1 = form.select1.value;
            var checkbox2 = form.select2.value;
            var checkbox3 = form.select3.value;

            if (checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) {
                minutes = 3;
              seconds = 0;
            }

            startTimer(minutes, "txt", function () {
                alert("Egg is ready")
            });

        }
    </script>
</head>

<body>
    <div id="txt"></div>
    <form id="form" onclick="validateTimer()">
        <div class="question">
            <select id="select1" name="select1">
                <option value="1">Soft</option>
                <option value="2">Medium</option>
                <option value="3">Hard</option>
            </select>
        </div>
        
        <div class="question">
            <select id="select2" name="select2">
                <option value="1">Small</option>
                <option value="2">Medium</option>
                <option value="3">Large</option>
            </select>
        </div>
        
        <div class="question">
            <select id="select3" name="select3">
                <option value="1">Small</option>
                <option value="2">Medium</option>
                <option value="3">Large</option>
            </select>
        </div>
        
        <div class="question">
            <input type="button" id="button" name="submit" value="Go" onclick="validateTimer()"
            />
            <br/>
        </div>
    </form>
    </div>
</body>

Here's another JSBin demo

You can adjust the timer format and egg readiness times as needed

Javascript Egg Timer

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you show me the steps for linking the next method of an EventEmitter?

react-webcam npm package for optimizing video size

The back button on an Angular JS application should display a confirmation dialog when pressed

"Encountering issue with the find() function following a successful outcome

Adjusting the timing of a scheduled meeting

Data binding in one direction with 2 input fields

Getting the full referrer URL can be achieved by using various methods depending

Merging asynchronous requests to create a unified GET endpoint

Displaying altered textContent

ESLint encountered an error while attempting to load the configuration "next/babel" for extension

Issues encountered when trying to execute npm start: "The function this.htmlWebpackPlugin.getHooks is not recognized."

Caution: React detecting an active event listener on a scrolling-dependent 'touchstart' action

React is up and running smoothly on my local machine, but unfortunately encountering issues on Vercel

Utilize jQuery to extract URL parameters and incorporate them into a script

replace the tsconfig.json file with the one provided in the package

Equalize the color of overlapping background events with non-overlapping background events in fullcalendar

Error encountered while attempting to import a virtual module, import resolution unsuccessful

Having trouble with a malfunctioning part of the API in my NodeJS code. Any suggestions on how to resolve the issue

Clicking on the button will reset the counter

Receiving an undefined value when trying to access the index of a data list array