Assignment $3$ Part $2$: Add a stopwatch to the Clock application

In this assignment, you$$ll add a stopwatch feature to the application you created in the previous assignment. The stopwatch will display elapsed minutes, seconds, and milliseconds. The enhanced application looks like this:

$1.$ Open the starter folder attached $($zipped$)$ to this Assignment folder:

Evaluations$\backslash$Assignments$\backslash$Assignment $3\backslash$Assignment$3-$Files.zip $->$ clock$\_$stopwatch

$2.$ In the JavaScript file, note the $$(),$ displayCurrentTime$(),$ padSingleDigit$(),$ and DOMContentLoaded event handler functions from the Clock application. In addition, note the global variables and starting code for the tickStopwatch$(),$ startStopwatch$(),$ stopStopwatch$(),$ and resetStopwatch$()$ functions.

$3.$ 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.

$4.$ In the startStopwatch$()$ function, add code that starts the stopwatch. Be sure to cancel the default action of the link too.

$5.$ In the stopStopwatch$()$ and resetStopwatch$()$ functions, add code that stops the stopwatch. Also, in the resetStopwatch$()$ function, reset the elapsed time and the page display. Be sure to cancel the default action of the links too.

$6.$ In the DOMContentLoaded event handler, attach the stopwatch event handlers to the appropriate links.

$7.$ In index.html$,$ change the text in the tag to your name and student number. "use strict";

const $ $=$ selector $=>$ document.querySelector$($selector$)$;

const padSingleDigit $=$ num $=>$ num.toString$().$padStart$(2,"0")$;

const displayCurrentTime $=()=>\{$

const now $=$ new Date$()$;

const hours $=$ now.getHours$()$;

let ampm $="$AM$"$; $//$ set default value

$//$ correct hours and AM$/$PM value for display

if $($hours $>12)\{//$ convert from military time

hours $=$ hours $-12$;

ampm $="$PM$"$;

$\}$ else $\{//$ adjust $12$ noon and $12$ midnight

switch $($hours$)\{$

case $12$: $//$ noon

ampm $="$PM$"$;

break;

case $0$: $//$ midnight

hours $=12$;

ampm $="$AM$"$;

$\}$

$\}$

$$("$#hours"$).$textContent $=$ hours;

$$("$#minutes"$).$textContent $=$ padSingleDigit$($now$.$getMinutes$())$;

$$("$#seconds"$).$textContent $=$ padSingleDigit$($now$.$getSeconds$())$;

$$("$#ampm"$).$textContent $=$ ampm;

$\}$;

$//$global stop watch timer variable and elapsed time object

let stopwatchTimer $=$ null;

let elapsedMinutes $=0$;

let elapsedSeconds $=0$;

let elapsedMilliseconds $=0$;

const tickStopwatch $=()=>\{$

$//$ increment milliseconds by $10$ milliseconds

$//$ if milliseconds total $1000,$ increment seconds by one and reset milliseconds to zero

$//$ if seconds total $60,$ increment minutes by one and reset seconds to zero

$//$display new stopwatch time

$\}$;

$//$ event handler functions

const startStopwatch $=$ evt $=>\{$

$//$ prevent default action of link

$//$ do first tick of stop watch and then set interval timer to tick

$//$ stop watch every $10$ milliseconds. Store timer object in stopwatchTimer

$//$ variable so next two functions can stop timer.

$\}$;

const stopStopwatch $=$ evt $=>\{$

$//$ prevent default action of link

$//$ stop timer

$\}$;

const resetStopwatch $=$ evt $=>\{$

$//$ prevent default action of link

$//$ stop timer

$//$ reset elapsed variables and clear stopwatch display

$\}$;

document.addEventListener$("$DOMContentLoaded$",()=>\{$

$//$ set initial clock display and then set interval timer to display

$//$ new time every second. Don't store timer object because it

$//$ won't be needed $-$ clock will just run.

displayCurrentTime$()$;

setInterval$($displayCurrentTime$,1000)$;

$//$ set up stopwatch event handlers

$\})$;