Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 3 | Quote Generator#1119
Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 3 | Quote Generator#1119mahmoudshaabo1984 wants to merge 1 commit intoCodeYourFuture:mainfrom
Conversation
mahmoudshaabo1984
changed the title
|
Hi @cjyuan, I have just opened my Pull Request for the Sprint 3 project: the Quote Generator App. I am happy to share that I have completed all the mandatory requirements, and I also implemented the stretch goal (the auto-play feature using I made sure to structure the HTML securely and used the I am looking forward to your review and any feedback you might have! Thank you, |
mahmoudshaabo1984
added
the
Needs Review
cjyuan
left a comment
cjyuan
left a comment
There was a problem hiding this comment.
Code is well written and organised. Well done.
| // Listen for a click on the button, then run displayQuote | ||
| newQuoteButton.addEventListener("click", displayQuote); | ||
|
|
||
| // Run displayQuote once when the page loads | ||
| displayQuote(); | ||
| // --- Auto-play Feature (Stretch Goal) --- |
There was a problem hiding this comment.
Placing all the "run on load" code in one place is a good practice.
You could consider placing them inside a function to make it clearer that "this is what runs when the page loads."
For examples,
function setup() {
// code to be executed on page load
}
window.addEventListener('load', setup);or
window.addEventListener('load', function() {
// code to be executed on page load
});| // 1. Get the checkbox and status elements from HTML | ||
| const autoPlayCheckbox = document.getElementById("auto-play-checkbox"); | ||
| const autoPlayStatus = document.getElementById("auto-play-status"); | ||
|
|
||
| // 2. Create a variable to hold the timer ID (so we can stop it later) | ||
| let autoPlayInterval; | ||
|
|
||
| // 3. Create a function to turn auto-play ON or OFF | ||
| function toggleAutoPlay() { | ||
| // Check if the checkbox is checked | ||
| if (autoPlayCheckbox.checked === true) { | ||
| // Turn ON: update text and start the timer (5000 milliseconds = 5 seconds) | ||
| autoPlayStatus.textContent = "auto-play:ON"; | ||
| autoPlayInterval = setInterval(displayQuote, 5000); | ||
| } else { | ||
| // Turn OFF: update text and stop the timer | ||
| autoPlayStatus.textContent = "auto-play:OFF"; | ||
| clearInterval(autoPlayInterval); | ||
| } | ||
| } | ||
|
|
||
| // 4. Listen for any "change" (check/uncheck) on the checkbox | ||
| autoPlayCheckbox.addEventListener("change", toggleAutoPlay); |
There was a problem hiding this comment.
All this code is to implement the "auto-play timer" stretch feature, and you did good in placing all related code in one place.
If you are interested in exploring keeping the code modularised (which is an important skill for managing large application), try looking up "JavaScript ES Module" next.
cjyuan
added
Complete
2 participants
Hello Reviewers / CodeYourFuture Team,
I have completed the Quote Generator App project for Sprint 3. I am excited to share that I have implemented both the mandatory requirements and the advanced stretch goal (Auto-play feature).
🎯 Acceptance Criteria Met:
💻 Technical Implementation Details:
pickFromArray()function to safely retrieve random quote objects.setIntervalandclearIntervalto manage the auto-play timer logic without memory leaks.aria-live="polite"attribute on the quote container so that screen readers announce the new quotes automatically without interrupting the user.npm test) are passing successfully.I am really enjoying working with the DOM API and asynchronous timers. I look forward to your review and feedback!
Best regards,
Mahmoud Shaabo