Digital clock with stopwatch

Clock

$3$: $05$:$22$ PM

$-$Stop Watch

Start Ster Reset $00$: $08$: $610$

In the JavaScript file, note the $$,$ displayCurrentTime$(),$ padSingleDigit$(),$ and DQMContentLoaded

event handler functions from the Clock application. In addition, note the global variables and starting

code for the tickStopwatch$(),$ startStopwatch$(),$ stopStopwatch$(),$ and resetStopwatch$()$ functions.

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.

In the startStopwatch$()$ function, add code that starts the stopwatch. Be sure to cancel the default

action of the link too.

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.

In the DQMContentLoaded event handler, attach the stopwatch event handlers to the appropriate

links.k$!$DOCTYPE $html>$

head$>$

Digital clock with stopwatch

$id=$

Clock

:

:

$id=>$ span$>$

$id=$ "ampm" $>$ span$>$

$id=$

$fieldset>$

stop watch

Start

Stop

Reset

$00$:

$00$:

$id=$

$$script src$=$"clock.js$"$ : script$>$

"use strict";

var evt

attach: function$($node$,$ eventName, func$)\{$

$\},$

detach: function$($node$,$ eventName, func$)\{$

$\},$

preventDefault: function$($e$)\{$

$\}$

$\}$;

"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

$\})$;