Question

In: Computer Science

Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration"...

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

Solutions

Expert Solution

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "timerDuration.html" is created, which contains following code.

timerDuration.html:

<!DOCTYPE html>

<html lang="en">

<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>

<!-- textbox for timer duration -->

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

<br><br>

<!-- button -->

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

<!-- <script> is used for javascript -->

<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>

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

Output : Open web page timerDuration.html in the browser and will get the screen as shown below

Screen 1 :timerDuration.html

Screen 2:Screen when timer value is entered 5

Screen 3:Screen when timer value is 0

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

venereology answered 1 month ago
Next > < Previous

Related Solutions

This should be done in JavaScript. The HTML file should only contain an empty main tag....
This should be done in JavaScript. The HTML file should only contain an empty main tag. All other HTML on the page should be created with JavaScript. The JavaScript file should be a separate file.   Make an empty HTML file, put an empty main tag inside the body. In your JavaScript, use querySelector to get a reference to the main tag and save it in a variable named main. Look up three good jokes and store them as separate variables...
HTML document containing a form. The title bar should display “Voting Form”. The form should contain...
HTML document containing a form. The title bar should display “Voting Form”. The form should contain the following: Text boxes to accept the person’s name and e-mail address At least five radio buttons the user can use to vote for a candidate for some office. (You make up some names) Text box for write-in alternative Checkboxes with name and value attributes for these options: oThis is the first time I have voted online. o I have periodically voted online. o...
HTML Create a page of texts that uses inline elements. The page should contain a citation,...
HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.
Create a form using the following HTML elements at a minimum. Style the form in your...
Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form). textarea textbox input type of "email" select radio button checkbox submit button style at least three elements of your form in your stylesheet, including your submit button Use a comment to delineate the beginning and end of...
Requirements: Your response should contain the following three parts, and should be developed with clear and...
Requirements: Your response should contain the following three parts, and should be developed with clear and concise paragraphs. Include a reference page for the source of the ethical issue if it is not what you have experienced. Word Limit: 300-500 1. Identify an ethical issue you have witnessed or read about or heard about in the news. 2. Describe the issue: what is the issue? How is it an ethical issue? In describing the issue, identify the source: state where...
Write a C++ program to create a text file. Your file should contain the following text:...
Write a C++ program to create a text file. Your file should contain the following text: Batch files are text files created by programmer. The file is written in notepad. Creating a text file and writing to it by using fstream: to write to a file, you need to open thew file as write mode. To do so, include a header filr to your program. Create an object of type fsrteam. Open the file as write mode. Reading from a...
Your Java program should perform the following things:Take the input from the user about the...
Your Java program should perform the following things:Take the input from the user about the patient name, weight, birthdate, and height.Calculate Body Mass Index.Display person name and BMI Category.If the BMI Score is less than 18.5, then underweight.If the BMI Score is between 18.5-24.9, then Normal.If the BMI score is between 25 to 29.9, then Overweight.If the BMI score is greater than 29.9, then Obesity.Calculate Insurance Payment Category based on BMI Category.If underweight, then insurance payment category is low.If Normal...
1.Briefly explain four colligative properties. Your explanation should contain the following: a)definition of property b)does it...
1.Briefly explain four colligative properties. Your explanation should contain the following: a)definition of property b)does it increase or decrease with concentration c)what mathematical equation links the property to concentration d)At least one example of natural applications of the property
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT