diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..19f995bfe 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,53 @@ -function setAlarm() {} + +function setAlarm() { + const input = document.getElementById("alarmSet") // get the input field + let timeLeft = Number(input.value); // convert input value to a number + + // validate the input value + if (!Number.isFinite(timeLeft) || timeLeft <= 0) { // The Number.isFinite() method is a way to test whether a value + // is a finite number value. and also prevents the error if the user types nothing or a negative number. + return "input is invalid"; // input is invalid + } + + updateDisplay(timeLeft); // show the starting time immediately + + if (countdown) { + clearInterval(countdown) + // clear previous countdown if running + // if a countdown is already running stop it before starting a new one. + } + + // start countdown + countdown = setInterval(() => { + timeLeft -= 1; // reduce time by 1 seconds + updateDisplay(timeLeft); // update display + + if (timeLeft <= 0) { // when time reaches 0 + clearInterval(countdown); // stop the countdown + countdown = null; // reset variable + playAlarm(); // play the alarm sound + + // change background color when the alarm clock finishes + document.body.style.backgroundColor = "red"; + } + + }, 1000); // run every one second + + +} +let countdown = null; + +function updateDisplay(totalSeconds) { + console.log("updating display with", totalSeconds); + const display = document.getElementById("timeRemaining"); // find h1 element + + if (totalSeconds < 0) totalSeconds = 0; // safety prevent negative time. + + const mins = String(Math.floor(totalSeconds / 60)).padStart(2, "0"); // Math.floor method rounds down and return the larges integer less than or equal to a given number. + const secs = String(totalSeconds % 60).padStart(2, "0"); // calculate remaining seconds. + + display.textContent = `Time Remaining: ${mins}:${secs}`; // update h1 text +} // DO NOT EDIT BELOW HERE @@ -20,6 +69,18 @@ function playAlarm() { function pauseAlarm() { audio.pause(); + audio.currentTime = 0; // reset to start, make sure next time play alarm starts from the beginning. + + // reset the background color to original + document.body.style.backgroundColor = ""; + + if(countdown) { + clearInterval(countdown); // clearing the interval stops the countdown immediately if user press Stop alarm + countdown = null; + } } window.onload = setup; + + + diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..631003fad 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,9 +4,10 @@ - Title here + Alarm clock app +

Time Remaining: 00:00

@@ -15,6 +16,6 @@

Time Remaining: 00:00

- + diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..17bcdd37e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,8 @@ - Title here + Quote Generator + diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..5e016d35b 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,26 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +// Access to the HTML elements. +const quoteText = document.getElementById("quote"); +const authorText = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + +// quoteText.innerText = "Smile Life is beautiful"; +// authorText.innerText = "Ahmad Ehsas"; + +// Show a random quote + +function showRandomQuote () { + const randomQuote = pickFromArray(quotes);// pick a random quote from the quote array. + quoteText.innerText = randomQuote.quote; // display the quote text in the HTML + authorText.innerText = randomQuote.author; // display the author's in the HTML +} +// Display quote on page load +showRandomQuote(); + +// Make the button work +// .addEventListener("click", ...) do something when the button is clicked +// Every time the user clicks the button, a new random quotes appears. +newQuoteButton.addEventListener("click", showRandomQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..3dffbd5ab 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,51 @@ /** Write your CSS in here **/ + +body { + background-color: #121212; + color: #ffffff; + font-family: Arial, sans-serif; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0; +} + +/** style the quote **/ +#quote { + font-size: 1.8rem; + max-width: 600px; + text-align: center; + margin-bottom: 10px; +} + +/** Style the author text **/ + +#author { + font-size: 1.2rem; + color: #aaaaaa; + margin-bottom: 20px; +} + +/** style the button dark mode **/ + +#new-quote { + background-color: #1e1e1e; + color: white; + border: 2px solid #444; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + transition: 0.3s; +} + +/** button hover effect **/ + +#new-quote:hover { + background-color: #333; + border-color: #777; +} + +