Skip to content

Cape Town | 26-ITP-May | Enice Mutanda | Sprint 3 |Quote Generator #1421

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
Enice-Codes wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Cape Town | 26-ITP-May | Enice Mutanda | Sprint 3 |Quote Generator #1421

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90e5f08
added css,js and html code to complete project,quotes.test.js
Aug 10, 2026
3a546ac
removed the from js file to css , modified the js file anf html
Aug 15, 2026
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
30 changes: 24 additions & 6 deletions Sprint-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,31 @@
<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>
<link rel="stylesheet" href="styles.css" />
<script defer src="quotes.js"></script>
</head>
<body>
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<main class="card">
<h1 class="visually-hidden">Quote generator app</h1>

<div class="quote-container">
<p id="quote"></p>
</div>

<div class="author-container">
<p id="author"></p>
</div>

<div class="controls">
<button type="button" id="new-quote">New quote</button>
</div>

<label class="autoplay-toggle">
<input type="checkbox" id="autoplay-checkbox" />
Auto-play
</label>
<p id="autoplay-status"></p>
</main>
</body>
</html>
</html>
76 changes: 76 additions & 0 deletions Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,3 +491,79 @@ const quotes = [
];

// call pickFromArray with the quotes array to check you get a random quote
function pickFromArray(array) {
const randomIndex = Math.floor(Math.random() * array.length);
return array[randomIndex];
}
Comment thread
cjyuan marked this conversation as resolved.
Outdated

// Grab the elements we need to update once, so we're not
// searching the page every time.
const quoteEl = document.getElementById("quote");
const authorEl = document.getElementById("author");
const newQuoteButton = document.getElementById("new-quote");
const autoplayCheckbox = document.getElementById("autoplay-checkbox");
const autoplayStatusEl = document.getElementById("autoplay-status");

// This will hold the id returned by setInterval so we can
// stop it again later when auto-play is switched off.
let autoplayIntervalId = null;

// How often to change the quote automatically, in milliseconds.
// Set to 60 seconds as per the brief - turn this down to
// something like 5000 (5 seconds) while you're testing.
const AUTOPLAY_INTERVAL_MS = 60000;

// Picks a new random quote and displays it on the screen.
function showRandomQuote() {
const randomQuote = pickFromArray(quotes);
// If you prefer the Math.random() approach directly, you could
// instead write:
// const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

quoteEl.textContent = `"${randomQuote.quote}"`;
authorEl.textContent = `— ${randomQuote.author}`;

@cjyuan cjyuan Aug 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The leading " and - appear to be for styling purposes. Keeping them in the HTML or in CSS would make it easier to style or modify the view. This allows front-end developers to adjust the UI without changing any JavaScript code.

@Enice-Codes Enice-Codes Aug 15, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

removed the "" and - from js file to css and html.i dint think it mattered

}

// Updates the on-screen text that says whether auto-play is on or off.
function updateAutoplayStatus(isOn) {
autoplayStatusEl.textContent = isOn
? "auto-play: ON — a new quote will appear every 60 seconds."
: "auto-play: OFF — quotes will only change when you click the button.";
}

// Turns auto-play on: shows a new quote immediately, then keeps
// showing a new one every AUTOPLAY_INTERVAL_MS.
function startAutoplay() {
updateAutoplayStatus(true);
autoplayIntervalId = setInterval(showRandomQuote, AUTOPLAY_INTERVAL_MS);
}

// Turns auto-play off: stops the repeating timer so the quote
// stops changing by itself.
function stopAutoplay() {
updateAutoplayStatus(false);
clearInterval(autoplayIntervalId);
autoplayIntervalId = null;
}

// Wire everything up once the page has loaded.
document.addEventListener("DOMContentLoaded", () => {
// Show a random quote as soon as the page loads.
showRandomQuote();

// Show a new quote whenever the button is clicked.
newQuoteButton.addEventListener("click", showRandomQuote);

// Start in the "off" state so the status text is correct
// even before the user touches the checkbox.
updateAutoplayStatus(false);

// Toggle auto-play on/off when the checkbox is switched.
autoplayCheckbox.addEventListener("change", () => {
if (autoplayCheckbox.checked) {
startAutoplay();
} else {
stopAutoplay();
}
});
});
116 changes: 116 additions & 0 deletions Sprint-3/quote-generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,117 @@
/** Write your CSS in here **/
:root {
--accent: #ff9f0a;
--accent-dark: #e08600;
}

* {
box-sizing: border-box;
}

body {
font-family: Georgia, "Times New Roman", serif;
background: var(--accent);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 2rem;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.card {
background: #fff;
padding: 3rem 3.5rem;
max-width: 700px;
width: 100%;
}

.quote-container {
position: relative;
padding-left: 3rem;
margin-bottom: 1.5rem;
}

.quote-container::before {
content: "\201C";
position: absolute;
left: 0;
top: -0.6rem;
font-size: 4rem;
line-height: 1;
font-weight: bold;
color: var(--accent);
}

#quote {
font-size: 1.6rem;
color: var(--accent);
margin: 0;
line-height: 1.4;
}

.author-container {
text-align: right;
margin-bottom: 2rem;
}

#author {
font-size: 1.1rem;
color: var(--accent);
margin: 0;
}

#author::before {
content: "- ";
}

.controls {
display: flex;
justify-content: flex-end;
}

button {
font-family: system-ui, sans-serif;
padding: 0.85rem 1.75rem;
border: none;
background: var(--accent);
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}

button:hover {
background: var(--accent-dark);
}

.autoplay-toggle {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
font-family: system-ui, sans-serif;
font-size: 0.9rem;
color: #888;
margin-top: 1rem;
}

#autoplay-status {
font-family: system-ui, sans-serif;
font-size: 0.8rem;
color: #999;
text-align: right;
margin: 0.25rem 0 0;
}
Loading