Question

In: Computer Science

Submission Guidelines This assignment may be submitted for full credit until Friday, October 4th at 11:59pm....

Submission Guidelines

This assignment may be submitted for full credit until Friday, October 4th at 11:59pm. Late submissions will be accepted for one week past the regular submission deadline but will receive a 20pt penalty. Submit your work as a single HTML file. It is strongly recommended to submit your assignment early, in case problems arise with the submission process.

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

Evaluation

Your assignment will be graded according to whether all the required elements are present and in the correct formats and all required functionalities are operable.

Solutions

Expert Solution

Detailed explanation,comments and output screenshots are provided,please go through them

Thank You

Timer.html

<!DOCTYPE html>
<HTML>
<TITLE>
   Timer
</TITLE>
<BODY>
<label id="timelabel"> Timer Duration </label><br>
   <input id="timeinput" type="text" value="0"></input><br>
   <button id="timestart" onclick="timer()"> Start </button>
  
   <button id="timenew" onclick="newtimer()" hidden>New Timer </button>
<p id="timer" ></p>
  


<script>

/* Counter function that starts count and displasy button at the end of count */

function myCounter() {   
document.getElementById("timer").innerHTML = ++count;
if(cmax==count)
{
clearInterval(v);
document.getElementById("timer").innerHTML ="";
document.getElementById("timenew").style.display = "block";
}
}
/*Global variables required */
var v;
var count=0;
var cmax;
/* timer function called while start pressed hides the label,input,button and starts counting after counting displays new timer button*/
function timer() {
var c = document.getElementById("timeinput").value;
cmax=c;
count=0;
document.getElementById("timeinput").style.display = "none";
document.getElementById("timelabel").style.display = "none";
document.getElementById("timestart").style.display = "none";
v= setInterval(myCounter, 1000);
  
document.getElementById("timer").style.display = "block";
}
/*new timer button function where recreates the initial page*/
function newtimer()
{
document.getElementById("timeinput").style.display = "block";
document.getElementById("timelabel").style.display = "block";
document.getElementById("timestart").style.display = "block";
document.getElementById("timenew").style.display = "none";
document.getElementById("timeinput").value=0;
}
</script>

</body>
</html>

Output:


Related Solutions

Instructions Submission Guidelines This assignment may be submitted for full credit until Friday, October 4th at...
Instructions Submission Guidelines This assignment may be submitted for full credit until Friday, October 4th at 11:59pm. Late submissions will be accepted for one week past the regular submission deadline but will receive a 20pt penalty. Submit your work as a single HTML file. It is strongly recommended to submit your assignment early, in case problems arise with the submission process. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain...
This assignment was locked Feb 27 at 11:59pm. A. There are three types of taxable income;...
This assignment was locked Feb 27 at 11:59pm. A. There are three types of taxable income; 1. active, 2. portfolio, 3. passive.  Describe each (in your own words) and make sure you understand the tax implications of these incomes. B. Debra Ferguson received the items and amounts of income shown below during 2016. Help her calculate, (a) her gross income and (b) that portion (dollar amount) of her income that is tax exempt. Salary                                                      $33,500 Dividends                                                  800            Gift from mother                                       500  ...
Due Friday Oct. 30th, 11:59pm (10 marks total): 1. Explain the purpose of a sequence diagram....
Due Friday Oct. 30th, 11:59pm (10 marks total): 1. Explain the purpose of a sequence diagram. . 2. Draw a sequence diagram for the online ticketing system in Assignment #3. Identify the objects, lifelines, messages, and focuses in your diagram. .
CSC 101 Assignment 3 Barista Assistant Due Date: Friday, October 30 at 11:59 PM Learning Objectives:...
CSC 101 Assignment 3 Barista Assistant Due Date: Friday, October 30 at 11:59 PM Learning Objectives: Practice combining your knowledge of conditionals, loops, functions, strings, and lists. What to Submit: Write your program in a Python script named barista.py. Submit this file to the Assignment 3 page on Canvas. Description The purpose of this assignment is to write a Python program for a cafe to help baristas create coffee for a customer. Your program will take the customer's order and...
CSE/EEE 230 Assignment 4 Fall 2019 Due Sept 30 (11:59PM) In this assignment, you are to...
CSE/EEE 230 Assignment 4 Fall 2019 Due Sept 30 (11:59PM) In this assignment, you are to complete a MIPS program so it will perform the required tasks. The main function of the code is provided. Do not change the code in the main function. There is a loop in the main function. You are to complete the program by writing two functions. Pay particular attention to the purpose of each function and how the parameters and return value are to...
CS2123 Data Structures - Fall 2019 Assignment 1: Function Runtimes Table Due 9/11/19 by 11:59pm Completing...
CS2123 Data Structures - Fall 2019 Assignment 1: Function Runtimes Table Due 9/11/19 by 11:59pm Completing the Program (15 points) This program prints a table of runtimes (these are displayed in seconds) for given functions on arrays. The program tests different array sizes to establish a relationship between input size and runtime. It tests each array size multiple times and then takes an average of the times. Here are example calls to the timing functions: int sizes[] = { 1000,...
Complete the following for full credit in this assignment: Complete the coding requirement for the Class...
Complete the following for full credit in this assignment: Complete the coding requirement for the Class Method Bodies: Write the constructor: This should initialize all of your class fields and dynamically allocate memory for your array that will hold your stack data. You should use the constant “n” as the size for your fixed-size stack. Write the push method: This should add the item in the formal parameter to your stack. Caveat: You need to check and make sure you...
Tom Smith has two jobs to complete on Friday May 11, 20XX. He arrives at the...
Tom Smith has two jobs to complete on Friday May 11, 20XX. He arrives at the workshop at 8.30 am and spends 30 minutes on administration tasks. Direct labour is charged at $30 and applied overhead is $38 per hour. The job for Mr Brown takes five hours including one hour’s travelling time. He installs a new hot water service which has a material cost of $900. On the way to his next job for Mrs Jones he spends 30...
MATLAB Assignment 8 Introduction to Linear Algebra (Weeks 11 and 12) Spring, 2018 1. MATLAB Submission...
MATLAB Assignment 8 Introduction to Linear Algebra (Weeks 11 and 12) Spring, 2018 1. MATLAB Submission Problem 3 ( Due Date : May 24 (Thu) ) Referring to the instruction below, you are required to submit this problem. A common problem in experimental work is to find a curve y = f(x) of a specified form corresponding to experimentally determined values of x and y, say (x1, y1), (x2, y2), · · · , (xn, yn). The followings are the...
To get full credit for this assignment you must: (1) answer each question - make sure...
To get full credit for this assignment you must: (1) answer each question - make sure you answer every part of question AND (2) respond to at least 2 of your classmates posts (NOTE: You should not just agree/ disagree with the post. You need to provide justified explanation of your agreement/disagreement. Be respectful at all times. Do NOT revise your post after reading other student posts.) In your own words, answer all questions (4 points each): [5pts] Chapter 8...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT