- For educators
- English (US)
- English (India)
- English (UK)
- Greek Alphabet
This problem has been solved!
You'll get a detailed solution from a subject matter expert that helps you learn core concepts.
Question: In this assignment, you’ll create an application that displays the current time in hours, minutes, and seconds. The display should use a 12-hour clock and indicate whether it’s AM or PM. The application looks like this: To convert the computer’s time from a 24-hour clock to a 12-hour clock, first check to see if the hours value is greater than 12. If so,
In this assignment, you’ll create an application that displays the current time in hours, minutes, and seconds. The display should use a 12-hour clock and indicate whether it’s AM or PM. The application looks like this: To convert the computer’s time from a 24-hour clock to a 12-hour clock, first check to see if the hours value is greater than 12. If so, subtract 12 from the hours value and set the AM/PM value to “PM”. Also, be aware that the hours value for midnight is 0. 1. Extract the included start code project. 2. DO NOT modify the HTML or CSS files for any reason. Only use JavaScript to meet the requirements of this assignment. 3. In the JavaScript file, note the following four functions: The $ function. The padSingleDigit() function adds a leading zero to single digits. The start of a displayCurrentTime() function. And the start of an onload event handler. 4. In the onload handler: a. Update the header to replace your_name with your first name. b. Code a timer that calls the displayCurrentTime() function at 1 second intervals. Also, make sure that the current time shows immediately as soon as the page loads and not after 1 second. 5. In the displayCurrentTime() function, add code that uses the Date object to determine the current hour, minute, and second. Convert these values to a 12-hour clock, determine the AM/PM value, and display these values in the appropriate span tags. PROG8660 - JavaScript Programming Page 2 of 2 Add a stopwatch feature to the application. The stopwatch will display elapsed minutes, seconds, and milliseconds. The enhanced application looks like this: 6. Update the header to include “ & Stopwatch” in it. 7. In the JavaScript file, note the global variables: stopwatchTimer , elapsedMinutes , elapsedSeconds , and elapsedMilliseconds . In addition, note the four functions: tickStopwatch() , startStopwatch() , stopStopwatch() , and resetStopwatch() . 8. In the tickStopwatch() function, add code that adds 10 milliseconds to the elapsedMilliseconds variable and then adjusts the elapsedMinutes and elapsedSeconds variables accordingly. Then, add code that displays the result in the appropriate span tags in the page. 9. In the startStopwatch() function, add code that starts the stopwatch immediately and then tick every 10ms. Be sure to cancel the default action of the link too, but don’t worry about providing for cross-browser compatibility. 10. In the stopStopwatch() and resetStopwatch() functions, add code that stops the stopwatch. Also, in the resetStopwatch() function, reset the elapsed time and update the stopwatch on UI. Be sure to cancel the default action of the links too. 11. In the onload event handler, attach the stopwatch event handlers to the appropriate links
Here's the JavaScript code that fulfills the requirements mentioned in the assignment:
Make sure to i...
Not the question you’re looking for?
Post any question and get expert help quickly.