ZuoTi.Pro
Question

I have some code for HTML/Javascript but I need to change it up a bit. Heres...

I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you.

Assignment

For this assignment, you will write a timer application in HTML and JavaScript.

Your HTML document should contain the following elements/features:

  1. HTML tags:
    1. An <input> tag labeled "Timer Duration" with the initial value 0
    2. A <button> tag labeled "Start"
  2. Script: When the user presses the button (1b), a function will begin that does the following:
    1. Reads the value from the input field (1a)
    2. Removes the <input> and <button> tags (1a & 1b)
    3. Creates a new <p> tag, initialized to show the input value
    4. Starts a timer that ticks down to zero. For every second that elapses, the paragraph tag (2c) will show the updated timer value (i.e., one less)
    5. When the timer reaches zero, the countdown will stop and the paragraph tag (2c) will be removed and be replaced by a <button> tag labeled "New Timer"
    6. When the <button> tag (2e) is pressed, it will be removed and the <input> and <button> tags (1a, 1b) will be recreated with their original formats

<!DOCTYPE html>

<head>

<!-- title for web page -->

<title>Timer Duration</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<!-- label for Timer Duration-->

<label for="timerDuration" id="lblTimerDuration">Timer Duration</label>
<input type="text" id="timerDuration" />
<button id="timenew" onclick="newtimer()" hidden>New Timer </button>
<br><br>
<input type="button" value="Start" id="btnStart" onclick="startTime()" />

<script>

//function startTime()

function startTime() {

//taking input entered by user

var time = parseInt(document.getElementById("timerDuration").value);

//hide the textbox

document.getElementById("timerDuration").style.display = "none";//hide textbox
document.getElementById("btnStart").style.display = "none";//hide button
document.getElementById("lblTimerDuration").style.display = "none";//hide label

//create a new paragraph

var p = document.createElement("p");
p.setAttribute("id","timerPara");//set attribute
document.body.append(p);//show paragraph

//calling function setInterval

var clear=setInterval(() => {

//if time is greater than 0

if (time >= 0) {

p.innerHTML = time;//set time

}

else {
   clearInterval(clear);//clear the interval
   document.getElementById("timerDuration").style.display="inline";//show textbox
   document.getElementById("timerDuration").value = "";//set value in the textbox
   document.getElementById("btnStart").style.display = "block";//show button
   document.getElementById("lblTimerDuration").style.display = "inline";//show label
   document.getElementById("lblTimerDuration").innerHTML = "New Timer";//set text
   document.getElementById("timerPara").remove();//remove paragraph
}

time--;//decrement timer

}, 1000);

}

</script>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

timer.html :

<!DOCTYPE html>

<head>

<!-- title for web page -->

<title>Timer Duration</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<!-- label for Timer Duration-->

<label for="timerDuration" id="lblTimerDuration">Timer Duration</label>

<input type="text" id="timerDuration" />

<br><br>

<input type="button" value="Start" id="btnStart" onclick="startTime()" />

<script>

//function startTime()

function startTime() {

//taking input entered by user

var time = parseInt(document.getElementById("timerDuration").value);

//hide the textbox

document.getElementById("timerDuration").style.display = "none";//hide textbox

document.getElementById("btnStart").style.display = "none";//hide button

document.getElementById("lblTimerDuration").style.display = "none";//hide label

//create a new paragraph

var p = document.createElement("p");

p.setAttribute("id", "timerPara");//set attribute

document.body.append(p);//show paragraph

//calling function setInterval

var clear = setInterval(() => {

//if time is greater than 0

if (time >= 0) {

p.innerHTML = time;//set time

}

else {

clearInterval(clear);//clear the interval

document.getElementById("timerDuration").style.display = "inline";//show textbox

document.getElementById("timerDuration").value = "";//set value in the textbox

document.getElementById("btnStart").style.display = "block";//show button

document.getElementById("btnStart").value= "New Timer";//set button text

document.getElementById("lblTimerDuration").style.display = "inline";//show label

document.getElementById("lblTimerDuration").innerHTML = "New Timer";//set text

document.getElementById("timerPara").remove();//remove paragraph

}

time--;//decrement timer

}, 1000);

}

</script>

</body>

</html>

============================

Screen 1:

Screen 2:Showing timer

Screen 3:Screen when timer reaches 0 , will recreate the web page with button and textbox

0 0
Add a comment
Know the answer?
Add Answer to:
I have some code for HTML/Javascript but I need to change it up a bit. Heres...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • HTML Canvas: I have given my small html + js mix code below. By this program-...

    HTML Canvas: I have given my small html + js mix code below. By this program- I can just draw line, but after drawing any image I want to save the "image " on my desktop. I understand, I have to make a "button" to SAVE it and later if I want to load the picture, then I have to make a button on the webpage to "LOAD". But I am unable to understand the function I should write for...

  • How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...

    How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....

  • This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

    This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...

  • Write a html javascript program to do the following: the user inputs a number, for example,...

    Write a html javascript program to do the following: the user inputs a number, for example, 50 user presses a button, labeled START the program creates 50 random buttons around the browser window each button should be placed at a random location each button should be labeled with a random number between 1 and 50 add the following features every 2 seconds, move each button around by increment or decrementing its location if the user clicks on a button, change...

  • Could you please help me write a Javascript code that will show a smiley face picture...

    Could you please help me write a Javascript code that will show a smiley face picture when I click the button. The picture should not display until the button is pressed. Here is my attempt at the code. It does not work. Please keep the code as simple as you can as I am new to coding. Please also use the <div> tag if possible, onclick and use the getElementById. Thank you <html> <body> <img id="exampleImage" src="smileyFace.png" /> <button onclick="pushButton()">Try...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user...

    HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user draw a picture, then that picture(lines on Canvas) will be saved as commands, so when the user will refresh the webpage or when I will execute the code, then when I will press the "load" button, the last picture which I made will come on the canvas from localStorage. <!DOCTYPE html> <html> <head> <script> var commands = []; var start = 0; var c;...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT