Skip to content

Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 3 | Quote Generator #1119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mahmoudshaabo1984 wants to merge 1 commit into
base: main
Choose a base branch
from
+55 −3
Open

Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 3 | Quote Generator #1119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Quote generator app</title>
<script defer src="quotes.js"></script>
<script defer src="index.js"></script>
</head>
<body>
<h1>hello there</h1>
<h1>Quote Generator</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<div style="margin-top: 20px">
<input type="checkbox" id="auto-play-checkbox" />
<label for="auto-play-checkbox">Auto-play Quotes</label>
<p id="auto-play-status">auto-play:OFF</p>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions Sprint-3/quote-generator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// Get the paragraph element that will show the quote text
const quoteElement = document.getElementById("quote");

// Get the paragraph element that will show the author name
const authorElement = document.getElementById("author");

// Get the New Quote button element
const newQuoteButton = document.getElementById("new-quote");

// This function picks a random quote and puts it on the page
function displayQuote() {
const randomQuote = pickFromArray(quotes);
quoteElement.textContent = randomQuote.quote;
authorElement.textContent = randomQuote.author;
}

// 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) ---
Comment on lines +17 to +22
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
Comment on lines +24 to +46
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Loading