From 0d0268baba7841471597532ecd93017e06f8166c Mon Sep 17 00:00:00 2001 From: galyna-k Date: Wed, 16 Jul 2025 10:48:10 +0100 Subject: [PATCH 1/5] update index.html - change the title to appropriate; - add a link for the styling --- Sprint-3/quote-generator/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..a80854602 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,8 @@ - Title here + + Quote generator app From f3ad3428cb3145a50cdaa5ebfd5f139c264bcd49 Mon Sep 17 00:00:00 2001 From: galyna-k Date: Wed, 16 Jul 2025 10:53:54 +0100 Subject: [PATCH 2/5] update quotes.js - create a container creation function; - create function to set the quote and author; - add function to handle button; - comply a general quote rendering function --- Sprint-3/quote-generator/quotes.js | 39 ++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..88973e899 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,42 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +function createContainer() { + const h1 = document.querySelector("h1"); + if (h1) { + h1.remove(); + } + + const container = document.createElement('div'); + container.id = 'quote-container'; + container.className = 'container'; + + container.innerHTML = document.body.innerHTML; + + document.body.innerHTML = ""; + document.body.appendChild(container); +} + +function setQuoteAndAuthor() { + const result = pickFromArray(quotes); + document.querySelector( + "#quote" + ).innerHTML = `“ ${result.quote}`; + document.querySelector('#author').innerHTML = `- ${result.author}`; +} + +function handleButton() { + const button = document.getElementById("new-quote"); + + button.addEventListener("click", () => { + setQuoteAndAuthor(); + }); +} + +function renderQuote() { + createContainer(); + setQuoteAndAuthor(); + handleButton(); +} + +renderQuote(); From 8ff75a8edf14358c5cbc2b71e9f79ebb5b2d746e Mon Sep 17 00:00:00 2001 From: galyna-k Date: Wed, 16 Jul 2025 10:54:53 +0100 Subject: [PATCH 3/5] update style.css - add styles to the container, button, quote, author and mark --- Sprint-3/quote-generator/style.css | 46 ++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..71ebe2496 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,47 @@ /** Write your CSS in here **/ +:root { + --main-bg-color: #f1b847; + --bg-color: #f5f5f5; +} +body { + background-color: var(--main-bg-color); + color: var(--bg-color); + margin: 0; + padding: 0; +} +button { + background-color: var(--main-bg-color); + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; +} +button:hover { + filter: brightness(90%); +} + +.container { + background-color: var(--bg-color); + color: var(--main-bg-color); + text-align: right; + margin: 60px auto; + padding: 30px 40px; + max-width: 600px; + min-height: 150px; + font-size: 1.2em; +} +#quote { + font-size: 2rem; + line-height: 1.3; +} +#author { + margin-bottom: 24px; +} +.mark { + font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-size: 5rem; + font-weight: bold; + display: inline-block; + transform: translateY(0.4em); + line-height: 1; +} From e48e04431755909c72b923564b01310afa17bdd2 Mon Sep 17 00:00:00 2001 From: galyna-k Date: Wed, 16 Jul 2025 11:59:11 +0100 Subject: [PATCH 4/5] add auto-play toggle checkbox with functionality and styles - add auto-play toggle checkbox; - create a function to handle auto-play toggle; - add styles. --- Sprint-3/quote-generator/quotes.js | 29 +++++++++++++++++++++++++++++ Sprint-3/quote-generator/style.css | 23 ++++++++++++++++++++++- 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 88973e899..fcc1698f2 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -505,6 +505,34 @@ function createContainer() { document.body.innerHTML = ""; document.body.appendChild(container); + + const autoPlayWrapper = document.createElement("div"); + autoPlayWrapper.id = "auto-play-wrapper"; + autoPlayWrapper.innerHTML = ` + + `; + document.body.appendChild(autoPlayWrapper); +} + +let autoPlayInterval = null; + +function handleAutoPlayToggle() { + const checkbox = document.getElementById("auto-play"); + const status = document.getElementById("auto-play-status"); + + checkbox.addEventListener("change", () => { + if (checkbox.checked) { + status.textContent = "ON"; + autoPlayInterval = setInterval(setQuoteAndAuthor, 3000); + } else { + status.textContent = "OFF"; + clearInterval(autoPlayInterval); + } + }); } function setQuoteAndAuthor() { @@ -527,6 +555,7 @@ function renderQuote() { createContainer(); setQuoteAndAuthor(); handleButton(); + handleAutoPlayToggle(); } renderQuote(); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 71ebe2496..a7a0001a6 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -2,6 +2,7 @@ :root { --main-bg-color: #f1b847; --bg-color: #f5f5f5; + --shadow: 0 0 5px rgba(0,0,0,0.2); } body { background-color: var(--main-bg-color); @@ -23,8 +24,9 @@ button:hover { .container { background-color: var(--bg-color); color: var(--main-bg-color); + box-shadow: var(--shadow); text-align: right; - margin: 60px auto; + margin: 80px auto; padding: 30px 40px; max-width: 600px; min-height: 150px; @@ -45,3 +47,22 @@ button:hover { transform: translateY(0.4em); line-height: 1; } +#auto-play-wrapper { + width: 130px; + position: fixed; + top: 20px; + right: 20px; + background-color: var(--bg-color); + color: var(--main-bg-color); + padding: 8px 12px; + box-shadow: var(--shadow); + font-size: 0.9rem; +} +#auto-play-wrapper input { + cursor: pointer; +} +.auto-play-label { + display: flex; + align-items: center; + gap: 6px; +} From 029d39c871e3adff2ef8bc4ba1324c01ae7a23c2 Mon Sep 17 00:00:00 2001 From: galyna-k Date: Wed, 16 Jul 2025 12:09:22 +0100 Subject: [PATCH 5/5] fix time --- Sprint-3/quote-generator/quotes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index fcc1698f2..6e065fada 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -527,7 +527,7 @@ function handleAutoPlayToggle() { checkbox.addEventListener("change", () => { if (checkbox.checked) { status.textContent = "ON"; - autoPlayInterval = setInterval(setQuoteAndAuthor, 3000); + autoPlayInterval = setInterval(setQuoteAndAuthor, 60000); } else { status.textContent = "OFF"; clearInterval(autoPlayInterval);