From 0cc0dcfcf918564131eeab4226495b8cef8ba533 Mon Sep 17 00:00:00 2001 From: Iakub Dubachev Date: Tue, 24 Dec 2024 20:17:19 +0000 Subject: [PATCH 1/4] Html Changes --- Sprint-3/quote-generator/index.html | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..37fb5d150 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,20 @@ - - - - Title here - - - -

hello there

-

-

- - + + + + Quote Generator App + + + +

Quote Generator

+

+

+ + +

Auto-Play: OFF

+ + From c6bf126b66cae4f79527c0e858fc2972415f3922 Mon Sep 17 00:00:00 2001 From: Iakub Dubachev Date: Tue, 24 Dec 2024 20:19:16 +0000 Subject: [PATCH 2/4] Quotes.js Changes --- Sprint-3/quote-generator/quotes.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..8aeff8f63 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,31 @@ +// Function to display a random quote +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + document.getElementById('quote').innerText = randomQuote.quote; + document.getElementById('author').innerText = `— ${randomQuote.author}`; +} + +// Event listener for the "New Quote" button +document.getElementById('new-quote').addEventListener('click', displayRandomQuote); + +// Auto-play functionality +let autoPlayInterval = null; +const autoPlayCheckbox = document.getElementById('auto-play'); +const autoPlayStatus = document.getElementById('auto-play-status'); + +autoPlayCheckbox.addEventListener('change', function () { + if (this.checked) { + autoPlayStatus.innerText = 'Auto-Play: ON'; + autoPlayInterval = setInterval(displayRandomQuote, 5000); // 5 seconds + } else { + autoPlayStatus.innerText = 'Auto-Play: OFF'; + clearInterval(autoPlayInterval); + } +}); + +// Display an initial random quote when the page loads +displayRandomQuote(); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at From 62c5b38bb302705bd7bb513d3a6f8a7fc1c5fffe Mon Sep 17 00:00:00 2001 From: Iakub Dubachev Date: Tue, 24 Dec 2024 20:20:26 +0000 Subject: [PATCH 3/4] Style.css Changes --- Sprint-3/quote-generator/style.css | 36 ++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..db15108b1 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,37 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + text-align: center; + margin: 50px; + } + + h1 { + color: #444; + } + + #quote { + font-size: 1.5em; + margin: 20px; + } + + #author { + font-size: 1em; + color: #888; + } + + button { + margin-top: 20px; + padding: 10px 20px; + font-size: 1em; + } + + label { + display: block; + margin-top: 20px; + } + + #auto-play-status { + margin-top: 10px; + font-style: italic; + } + \ No newline at end of file From b7caf221aa658e9e0751f32fdf58fd8bf2a12689 Mon Sep 17 00:00:00 2001 From: Iakub Dubachev Date: Tue, 24 Dec 2024 20:26:59 +0000 Subject: [PATCH 4/4] Quotes.test.js Changes --- Sprint-3/quote-generator/quotes.test.js | 58 +++++++++++++------------ 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js index 288ab4651..9e1208b42 100644 --- a/Sprint-3/quote-generator/quotes.test.js +++ b/Sprint-3/quote-generator/quotes.test.js @@ -9,35 +9,39 @@ const { default: userEvent } = require("@testing-library/user-event"); let page = null; beforeEach(async () => { - page = await JSDOM.fromFile(path.join(__dirname, "index.html"), { - resources: "usable", - runScripts: "dangerously", - }); + try { + page = await JSDOM.fromFile(path.join(__dirname, "index.html"), { + resources: "usable", + runScripts: "dangerously", + }); - // do this so students can use element.innerText which jsdom does not implement - Object.defineProperty(page.window.HTMLElement.prototype, "innerText", { - get() { - return this.textContent; - }, - set(value) { - this.textContent = value; - }, - }); + Object.defineProperty(page.window.HTMLElement.prototype, "innerText", { + get() { + return this.textContent; + }, + set(value) { + this.textContent = value; + }, + }); - jest - .spyOn(page.window.Math, "random") - .mockReturnValueOnce(0.02) // random number to target Albert Einstein quote [index: 2] - .mockReturnValueOnce(0.25) // random number to target Maya Angelou quote [index: 25] - .mockReturnValueOnce(0.79); // random number to target Rosa Parks quote [index: 80] + jest + .spyOn(page.window.Math, "random") + .mockReturnValueOnce(0.02) + .mockReturnValueOnce(0.25) + .mockReturnValueOnce(0.79); - return new Promise((res) => { - page.window.document.addEventListener("load", res); - }); + return new Promise((res) => { + page.window.document.addEventListener("load", res); + }); + } catch (error) { + console.error("Error loading JSDOM:", error); + } }); afterEach(() => { page = null; jest.restoreAllMocks(); + jest.clearAllMocks(); }); describe("Quote generator", () => { @@ -50,25 +54,23 @@ describe("Quote generator", () => { ); expect(authorP).toHaveTextContent("Albert Einstein"); }); - test("can change quote to another random quote", () => { + + test("can change quote to another random quote", async () => { const quoteP = page.window.document.querySelector("#quote"); const authorP = page.window.document.querySelector("#author"); const newQuoteBtn = page.window.document.querySelector("#new-quote"); - expect(quoteP).toHaveTextContent( - "Strive not to be a success, but rather to be of value." - ); - expect(authorP).toHaveTextContent("Albert Einstein"); + expect(newQuoteBtn).not.toBeNull(); expect(newQuoteBtn).toHaveTextContent("New quote"); - userEvent.click(newQuoteBtn); + await userEvent.click(newQuoteBtn); expect(quoteP).toHaveTextContent( "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." ); expect(authorP).toHaveTextContent("Maya Angelou"); - userEvent.click(newQuoteBtn); + await userEvent.click(newQuoteBtn); expect(quoteP).toHaveTextContent( "I have learned over the years that when one's mind is made up, this diminishes fear."