diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html old mode 100644 new mode 100755 index 30b434bcf..4796c4946 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,26 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+ +
+
+

+

+
+ +
+
+ +
+
diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json old mode 100644 new mode 100755 diff --git a/Sprint-3/quote-generator/quote_generator_example.png b/Sprint-3/quote-generator/quote_generator_example.png old mode 100644 new mode 100755 diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js old mode 100644 new mode 100755 index 4a4d04b72..4de81c669 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,39 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function updateQuoteAndAuthor() { + const { quote, author } = pickFromArray(quotes); + document.getElementById("quote").textContent = quote; + document.getElementById("author").textContent = author; +} + +function autoUpdateQuoteAndAuthor() { + const autoQuote = document.getElementById("toggle-btn"); + const newQuoteButton = document.getElementById("new-quote"); + const autoDisplayNotice = document.getElementById("auto-play-notice"); + let intervalId; + const preferredSecond = 60; + const intervalMS = 1000; + autoQuote.addEventListener("change", () => { + if (autoQuote.checked) { + newQuoteButton.style.display = "none"; + autoDisplayNotice.style.display = "block"; + intervalId = setInterval(() => { + updateQuoteAndAuthor(); + }, preferredSecond * intervalMS); + } else { + clearInterval(intervalId); + newQuoteButton.style.display = "block"; + autoDisplayNotice.style.display = "none"; + } + }); +} + +window.onload = () => { + updateQuoteAndAuthor(); + autoUpdateQuoteAndAuthor(); + document + .getElementById("new-quote") + .addEventListener("click", updateQuoteAndAuthor); +}; diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js old mode 100644 new mode 100755 diff --git a/Sprint-3/quote-generator/readme.md b/Sprint-3/quote-generator/readme.md old mode 100644 new mode 100755 diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css old mode 100644 new mode 100755 index 63cedf2d2..2fb17c0fc --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,116 @@ /** Write your CSS in here **/ +:root { + --primary-bg-color: #e9b066; + --primary-color: #ffffff; + --auto-activated: #8fc9f8; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + background-color: var(--primary-bg-color); +} + +#poster { + width: 80%; + padding: 25px; + background-color: var(--primary-color); + color: var(--primary-bg-color); + font-size: larger; + font-style: italic; + position: relative; + top: 150px; +} + +#quote { + font-weight: bold; +} + +#slide-bar { + display: flex; + justify-content: end; + width: 90%; +} + +#button-field { + display: flex; + justify-content: end; + margin-bottom: -10px; +} + +#display-notice { + display: flex; + justify-content: end; +} + +#auto-display-notice { + font-size: 12px; +} + +button { + border-radius: 8px; + font-size: medium; + background-color: var(--primary-bg-color); + color: var(--primary-color); + border: none; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--primary-color); + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: var(--primary-bg-color); + transition: 0.4s; +} + +input:checked + .slider { + background-color: var(--auto-activated); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--auto-activated); +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +}