diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..a066fb15b 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,25 @@ - - - - Title here - - - -

hello there

-

+ + + + + Quote Generator + + + + + +
+

- - - +
+ + + +
+ +
+ + + \ No newline at end of file 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); + } +} + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..21f3461d2 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,92 @@ /** Write your CSS in here **/ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + font-family:; + background-color:#f3a83b; +} + +.quote-wrapper { + background: white; + color: #f3a83b; + padding: 20px; + margin: 50px auto; + border-radius: 8px; + max-width: 80%; + height: auto; +} + +h1 { + font-size: 24px; +} + +#author { + text-align: right; + margin-top: 10px; +} + +button { + background-color:#f3a83b; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +.controls { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; +} + +.toggle { + display: none; +} + +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; + margin-left: 10px; + transition: background-color 0.3s; +} + +label::before { + content: "x"; + color: white; + position: absolute; + top: 3px; + left: 3px; + width: 20px; + height: 20px; + margin-top: 6.5px; + background-color: #f3a83b; + border-radius: 50%; + transition: transform 0.3s; +} + +.toggle:checked + label { + background-color: #f3a83b; + color: white; +} + +.toggle:checked + label::before { + content: '✔'; + color: #f3a83b; + transform: translateX(120px); + background-color: white; +} \ No newline at end of file