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...
Here is assignment 11 and it must be completed and submitted by Sunday july 26 at...
Here is assignment 11 and it must be completed and submitted by Sunday july 26 at 11:59pm Pacific Time. Start early and follow the instructions. Please note, no late assignment will be accepted. The assignment’s grade will be available in your Gradebook by the following Tuesday. This assignment is mainly to practice Selection programming structure with creating a project in VB. That is IF ... THEN ... ELSE ... END IF and  IF ... THEN ... ELSEIF ... ELSEIF .... END...
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...
Complete and submit the assignment in an EXCEL file. Full credit is earned only if the...
Complete and submit the assignment in an EXCEL file. Full credit is earned only if the formulas for the calculations is evident in the spreadsheet She Shed. Corp was organized in 2017. These business events occurred during the year, affecting intangible assets. 1.    Purchased a license for $20,000 on July 1, 2017. The license gives She Shed exclusive rights to sell its sheds in the tri-state region and will expire on July 1, 2025. 2.    Purchased a patent on January...
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...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT