+ + + + \ No newline at end of file diff --git a/week-9/stopwatch/js/main.js b/week-9/stopwatch/js/main.js new file mode 100644 index 0000000..9b648b7 --- /dev/null +++ b/week-9/stopwatch/js/main.js @@ -0,0 +1,53 @@ + // Define a counter variable for the number of seconds and set it to zero. + let secondCount = 0; + // Define a global to store the interval when it is active. + let stopWatch; + // Store a reference to the display paragraph in a variable + const displayPara = document.querySelector('.clock'); + + // Function to calculate the current hours, minutes, and seconds, and display the count + function displayCount() { + // Calculate current hours, minutes, and seconds + let hours = Math.floor(secondCount/3600); + let minutes = Math.floor((secondCount % 3600)/60); + let seconds = Math.floor(secondCount % 60) + + // Display a leading zero if the values are less than ten + let displayHours = (hours < 10) ? '0' + hours : hours; + let displayMinutes = (minutes < 10) ? '0' + minutes : minutes; + let displaySeconds = (seconds < 10) ? '0' + seconds : seconds; + + // Write the current stopwatch display time into the display paragraph + displayPara.textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds; + + // Increment the second counter by one + secondCount++; + } + + // Store references to the buttons in constants + const startBtn = document.querySelector('.start'); + const stopBtn = document.querySelector('.stop'); + const resetBtn = document.querySelector('.reset'); + + // When the start button is pressed, start running displayCount() once per second using setInterval() + startBtn.addEventListener('click', () => { + stopWatch = setInterval(displayCount, 1000); + startBtn.disabled = true; + }); + + // When the stop button is pressed, clear the interval to stop the count. + stopBtn.addEventListener('click', () => { + clearInterval(stopWatch); + startBtn.disabled = false; + }); + + // When the reset button is pressed, set the counter back to zero, then immediately update the display + resetBtn.addEventListener('click', () => { + clearInterval(stopWatch); + startBtn.disabled = false; + secondCount = 0; + displayCount(); + }); + + // Run displayCount() once as soon as the page loads so the clock is displayed + displayCount(); \ No newline at end of file diff --git a/week-9/working-web-form/.DS_Store b/week-9/working-web-form/.DS_Store new file mode 100644 index 0000000..bb40e54 Binary files /dev/null and b/week-9/working-web-form/.DS_Store differ diff --git a/week-9/working-web-form/css/form.css b/week-9/working-web-form/css/form.css new file mode 100644 index 0000000..8b276fd --- /dev/null +++ b/week-9/working-web-form/css/form.css @@ -0,0 +1,74 @@ +h1 { + margin-top: 0; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +form { + margin: 0 auto; + width: 350px; + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +div+div { + margin-top: 1em; +} + +label span { + display: inline-block; + width: 80px; + text-align: left; +} + +input, textarea { + font: 1em sans-serif; + width: 250px; + box-sizing: border-box; + border: 1px solid #999; +} + +input[type=checkbox], input[type=radio] { + width: auto; + border: none; +} + +input:focus, textarea:focus { + border-color: #000; +} + +textarea { + vertical-align: top; + height: 5em; + resize: vertical; +} + +fieldset { + width: 250px; + box-sizing: border-box; + margin-left: 136px; + border: 1px solid #999; +} + +button { + margin: 20px 0 0 124px; +} + +label { + position: relative; +} + +label em { + position: absolute; + right: 5px; + top: 20px; +} +#warning { + text-align: center; + color:rgb(190, 0, 0); +} \ No newline at end of file diff --git a/week-9/working-web-form/index.html b/week-9/working-web-form/index.html new file mode 100644 index 0000000..6a6d348 --- /dev/null +++ b/week-9/working-web-form/index.html @@ -0,0 +1,39 @@ + + +
+ + + +