From 9484af77356240dee2d5dd19a2b2346e35ee1032 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 3 Nov 2025 19:43:33 +0000 Subject: [PATCH 1/6] Refactor index.html and quotes.js for improved functionality and structure --- Sprint-3/quote-generator/index.html | 13 +++++++---- Sprint-3/quote-generator/quotes.js | 35 +++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..6e13c497e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,18 @@ - Title here + Quote Generator + -

hello there

-

+ +

- + +
+ + + diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..33d32fa1b 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,38 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +//dom elements +const body = document.querySelector("body"); +const quoteText = document.getElementById("quote"); +const authorText = document.getElementById("author"); +const newQuote = document.getElementById("new-quote"); +const autoPlay = document.getElementById("auto-play"); +const autoPlayStatus = document.getElementById("auto-play-status"); + +//event listeners +body.addEventListener("load",getQuote()); +newQuote.addEventListener("click", getQuote); +autoPlay.addEventListener("input", autoplay); + +//functions + +function getQuote() { + const randomIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[randomIndex] + quoteText.innerText = `"${quote.quote}"`; + authorText.innerText = `- ${quote.author}`; +} + +let intervalId; + +function autoplay() { + if (autoPlay.checked) { + autoPlayStatus.innerText = "auto-play:ON"; + intervalId = setInterval(getQuote, 5000); + } else { + autoPlayStatus.innerText= "auto-play:OFF"; + clearInterval(intervalId); + } +} + From 3dfbb29f64678ccf15c4a9e6ab5d3ce71fc25aca Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 3 Nov 2025 22:02:42 +0000 Subject: [PATCH 2/6] Refactor HTML structure and enhance CSS styles for improved layout and functionality --- Sprint-3/quote-generator/index.html | 40 +++++---- Sprint-3/quote-generator/style.css | 121 ++++++++++++++++++++++++++++ 2 files changed, 145 insertions(+), 16 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 6e13c497e..02e1172c3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,20 +1,28 @@ - - - - Quote Generator - - - - - + + + + + Quote Generator + + + + + +

- -
- - - - - +
+ + +
+ +
+ + + \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..9d8733b48 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,122 @@ /** Write your CSS in here **/ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + font-family: serif; + background-color: #ffa703; + accent-color: #ffa703; +} +.quote-wrapper { + background: white; + color: orange; + padding: 20px; + margin: 50px auto; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 80%; + height: auto; +} +h1 { + font-size: 24px; +} +#author { + text-align: right; + margin-top: 10px; + font-weight: 600; +} +button { + background-color: #ffa703; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +span { + font-size: 16px; + padding: 15px 20px; +} +#auto-play-status { + margin-right: 10px; +} + +//toggle switch style +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 40px; + padding: 20px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: relative; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: white; + border: #ffa703 1px solid; + -webkit-transition: 0.4s; + transition: 0.4s; + padding: 10px; +} + +.slider:before { + position: relative; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +input:checked + .slider { + background-color: #ffa703; + color: white; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196f3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 5px; +} + +.slider.round:before { + border-radius: 50%; +} + +.btns { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; +} From 99c4341863de7a403ad05c7f01a239e535f2a1bf Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 3 Nov 2025 22:13:57 +0000 Subject: [PATCH 3/6] Remove unnecessary comment for toggle switch style in CSS --- Sprint-3/quote-generator/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 9d8733b48..19a1b6dd3 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -46,7 +46,6 @@ span { margin-right: 10px; } -//toggle switch style /* The switch - the box around the slider */ .switch { position: relative; From 63cc87be4343b803541ea19f6ff18a104441f89d Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Tue, 4 Nov 2025 12:15:57 +0000 Subject: [PATCH 4/6] Refactor HTML and CSS for toggle switch to improve structure and styling --- Sprint-3/quote-generator/index.html | 9 +-- Sprint-3/quote-generator/style.css | 116 +++++++++++----------------- 2 files changed, 46 insertions(+), 79 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 02e1172c3..a066fb15b 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -13,12 +13,9 @@

-
- +
+ +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 19a1b6dd3..1655b387d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -7,29 +7,31 @@ body { height: 100vh; margin: 0; font-family: serif; - background-color: #ffa703; - accent-color: #ffa703; + background-color:#f3a83b; } + .quote-wrapper { background: white; - color: orange; + color: #f3a83b; padding: 20px; margin: 50px auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - width: 80%; + max-width: 80%; height: auto; } + h1 { font-size: 24px; } + #author { text-align: right; margin-top: 10px; - font-weight: 600; } + button { - background-color: #ffa703; + background-color:#f3a83b; color: white; border: none; padding: 10px 20px; @@ -38,84 +40,52 @@ button { font-size: 16px; } -span { - font-size: 16px; - padding: 15px 20px; -} -#auto-play-status { - margin-right: 10px; -} - -/* The switch - the box around the slider */ -.switch { - position: relative; - display: inline-block; - width: 60px; - height: 40px; - padding: 20px; +.controls { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; } -/* Hide default HTML checkbox */ -.switch input { - opacity: 0; - width: 0; - height: 0; +.toggle { + display: none; } -/* The slider */ -.slider { +label { + display: inline-block; + width: 125px; + padding: 10px 12px; + text-align: center; + background-color: white; + color: #f3a83b; + border: 1px solid #f3a83b; + border-radius: 5px; position: relative; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: white; - border: #ffa703 1px solid; - -webkit-transition: 0.4s; - transition: 0.4s; - padding: 10px; + margin-left: 10px; + transition: background-color 0.3s; } -.slider:before { - position: relative; +label::before { content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: 0.4s; - transition: 0.4s; + position: absolute; + top: 3px; + left: 3px; + width: 20px; + height: 20px; + margin-top: 5px; + background-color: #f3a83b; + border-radius: 50%; + transition: transform 0.3s; } -input:checked + .slider { - background-color: #ffa703; +.toggle:checked + label { + background-color: #f3a83b; color: white; + border: 1px solid white; } -input:focus + .slider { - box-shadow: 0 0 1px #2196f3; -} - -input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); -} - -/* Rounded sliders */ -.slider.round { - border-radius: 5px; -} - -.slider.round:before { - border-radius: 50%; -} - -.btns { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; -} +.toggle:checked + label::before { + transform: translateX(120px); + background-color: white; +} \ No newline at end of file From c8312cefd88d9f8b60d195efecf90e960d3be270 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Tue, 4 Nov 2025 12:28:38 +0000 Subject: [PATCH 5/6] Update toggle switch styles for improved visual feedback and remove box shadow from quote wrapper --- Sprint-3/quote-generator/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 1655b387d..37ba11c01 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -16,7 +16,6 @@ body { padding: 20px; margin: 50px auto; border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 80%; height: auto; } @@ -67,7 +66,8 @@ label { } label::before { - content: ""; + content: "X"; + color: white; position: absolute; top: 3px; left: 3px; @@ -82,10 +82,11 @@ label::before { .toggle:checked + label { background-color: #f3a83b; color: white; - border: 1px solid white; } .toggle:checked + label::before { + content: '✔'; + color: #f3a83b; transform: translateX(120px); background-color: white; } \ No newline at end of file From 2e9c3a40a881d6db2e92c818f780a4897a849940 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Tue, 4 Nov 2025 12:59:02 +0000 Subject: [PATCH 6/6] Fix font-family declaration and adjust label::before content for consistency --- Sprint-3/quote-generator/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 37ba11c01..21f3461d2 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -6,7 +6,7 @@ body { justify-content: center; height: 100vh; margin: 0; - font-family: serif; + font-family:; background-color:#f3a83b; } @@ -66,14 +66,14 @@ label { } label::before { - content: "X"; + content: "x"; color: white; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; - margin-top: 5px; + margin-top: 6.5px; background-color: #f3a83b; border-radius: 50%; transition: transform 0.3s;