Question

In: Computer Science

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

<!DOCTYPE html>

<html>

<head>

    <title>Count Down Timer</title>

</head>

<body>

    <!--(a) and (b) Input for seconds to start with -->

    <div id="inputTime">

        <input value='0' id="time">   <!--(a)-->

        <button onclick="start()">Start</button>  <!--(b)-->

    </div>

    <!-------------------------------------- -->

    <!--(c)--->

    <p id="display">


    </p>

    <!--------->

    <!--(e) and (f)-->

    <div style="display: none" id="newT">

        <button onclick="newTimer()">New Timer</button>

    </div>

    <!--------------->

    

</body>

    <script>

        function start(){

            document.getElementById("inputTime").style.display="none";  //On start input element and button is removed

            var time=document.getElementById("time").value;     //Initializing time to the given input value

            document.getElementById("display").style.display="block";    //Making the <p> tag visible

            document.getElementById("display").innerHTML = time + " seconds remaining";

            var timer = setInterval(function(){

                time -= 1;      //Time is decreased by for each 1 second

                document.getElementById("display").innerHTML = time + " seconds remaining";     //Display of time remaining

                if(time <= 0){

                    document.getElementById('newT').style.display="block";

                    

                    document.getElementById("display").style.display="none";

                    document.getElementById("time").value=0;

                    clearInterval(timer);

                }

            }, 1000);

        }

        function newTimer(){        //newTimer() function

            document.getElementById("inputTime").style.display="block";    

            document.getElementById('newT').style.display="none";

        }

    </script>

</html>

venereology answered 2 days ago
Next > < Previous

Related Solutions

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...
Instructions – PLEASE READ THEM CAREFULLY The Assignment must be submitted on Blackboard (WORD format only)...
Instructions – PLEASE READ THEM CAREFULLY The Assignment must be submitted on Blackboard (WORD format only) via allocated folder. Assignments submitted through email will not be accepted. Students are advised to make their work clear and well presented, marks may be reduced for poor presentation. This includes filling your information on the cover page. Students must mention question number clearly in their answer. Late submission will NOT be accepted. Avoid plagiarism, the work should be in your own words, copying...
Instructions – PLEASE READ THEM CAREFULLY The Assignment must be submitted on Blackboard (WORD format only)...
Instructions – PLEASE READ THEM CAREFULLY The Assignment must be submitted on Blackboard (WORD format only) via allocated folder. Assignments submitted through email will not be accepted. Students are advised to make their work clear and well presented, marks may be reduced for poor presentation. This includes filling your information on the cover page. Students must mention question number clearly in their answer. Late submission will NOT be accepted. Avoid plagiarism, the work should be in your own words, copying...
Hide Folder Information Turnitin® This assignment will be submitted to Turnitin®. Instructions The Final Project for...
Hide Folder Information Turnitin® This assignment will be submitted to Turnitin®. Instructions The Final Project for this course is the creation of an employee database. This assignment will give you some insight into how Visual Basic programming can be useful in the real world.   As you work on this application, try to make it presentable like an application you would want to use if you were using an employee database application. Feel free to incorporate pictures to make it appeal...
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...
professor instructions for the assignment: You can earn extra credit if you read an article or...
professor instructions for the assignment: You can earn extra credit if you read an article or news item about a project we discussed in class and write a 2 page reaction paper about it. Your paper must tell me about the project you read about, what makes it a sustainable or resilient project, what are the impacts, what did you like about the article, what did you not like, etc.. I would like to write about this new project that...
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...
CS 238 – Assembly Language Programming Fall 2019 Assignment 1 (Due: September 10, 2019) Submission Instructions:...
CS 238 – Assembly Language Programming Fall 2019 Assignment 1 (Due: September 10, 2019) Submission Instructions: Online submissions on Blackboard are preferred. Feel free to edit this Word document to insert your answers. Multiple online submissions on Blackboard are allowed, but only the last online submission made by the midnight of September 10 will be graded. Alternatively, a paper submission is possible, but it needs to be done in class on September 10. 1. Data can be interpreted as required...
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...
Assignment 1 (assessment worth 10%) Due Date Monday 8th May by 5pm GMT+8 [Submission will be...
Assignment 1 (assessment worth 10%) Due Date Monday 8th May by 5pm GMT+8 [Submission will be strictly observed. Make submission via Turnitin] Question 1 An Australian investor holds a one month long forward position on USD. The contract calls for the investor to buy USD 2 million in one month’s time at a delivery price of $1.4510 per USD. The current forward price for delivery in one month is F= $1.5225 per USD. Suppose the current interest rate interest is...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT