diff --git a/Sprint-3/quote-generator/app.js b/Sprint-3/quote-generator/app.js new file mode 100644 index 000000000..fd357d7a4 --- /dev/null +++ b/Sprint-3/quote-generator/app.js @@ -0,0 +1,52 @@ +/* globals quotes, pickFromArray */ + +const AUTO_PLAY_INTERVAL_MS = 60000; +let autoPlayIntervalId = null; + +const quoteElement = document.getElementById('quote'); +const authorElement = document.getElementById('author'); +const newQuoteButton = document.getElementById('new-quote'); +const autoPlaySwitch = document.getElementById('auto-play-switch'); +const autoPlayStatus = document.getElementById('auto-play-status'); + +function displayNewQuote() { + const randomQuote = pickFromArray(quotes); + quoteElement.innerText = randomQuote.quote; + authorElement.innerText = randomQuote.author; +} + +function startAutoPlay() { + if (autoPlayIntervalId) { + clearInterval(autoPlayIntervalId); + } + autoPlayStatus.classList.add('active'); + autoPlayIntervalId = setInterval(displayNewQuote, AUTO_PLAY_INTERVAL_MS); +} + +function stopAutoPlay() { + if (autoPlayIntervalId) { + clearInterval(autoPlayIntervalId); + autoPlayIntervalId = null; + } + autoPlayStatus.classList.remove('active'); +} + +function handleAutoPlayToggle(event) { + if (event.target.checked) { + startAutoPlay(); + } else { + stopAutoPlay(); + } +} + +newQuoteButton.addEventListener('click', function () { + displayNewQuote(); + if (autoPlaySwitch.checked) { + startAutoPlay(); + } +}); + +autoPlaySwitch.addEventListener('change', handleAutoPlayToggle); + +// Initial display on load. +displayNewQuote(); \ No newline at end of file diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..e2f9b6d98 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,38 @@ - Title here + Quote generator app + + + + + + + -

hello there

-

-

- +
+

Quote generator app

+

+

+ +
+ + +
+ Auto-play + +
+ +
auto-play: ON
+
+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..72a22388f 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,170 @@ -/** Write your CSS in here **/ +:root { + --bg-color: #f5ac2d; + --card-bg: #fff; + --primary-color: #f5ac2d; + --text-color: #f5ac2d; + --transition-speed: 0.3s; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + align-items: center; + background-color: var(--bg-color); + display: flex; + font-family: Georgia, 'Times New Roman', Times, serif; + justify-content: center; + min-height: 100vh; + padding: 1rem; +} + +.container { + background: var(--card-bg); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 700px; + padding: 3rem 4rem; + position: relative; + text-align: center; + width: 100%; +} + +h1 { + display: none; +} + +#quote { + color: var(--text-color); + font-size: 1.8rem; + line-height: 1.4; + margin-bottom: 1.5rem; + padding-left: 3rem; /* Space for quote icon. */ + position: relative; + text-align: left; +} + +#quote::before { + color: var(--primary-color); + content: '“'; + font-family: sans-serif; + font-size: 6rem; + left: -1rem; + line-height: 1; + opacity: 1; + position: absolute; + top: -1.5rem; +} + +#author { + color: var(--text-color); + font-size: 1.1rem; + font-style: italic; + margin-bottom: 2.5rem; + text-align: right; +} + +#author::before { + content: '- '; +} + +.controls { + align-items: flex-end; + display: flex; + flex-direction: column; +} + +button { + background-color: var(--primary-color); + border: none; + color: #fff; + cursor: pointer; + font-family: Arial, sans-serif; + font-size: 1rem; + font-weight: bold; + padding: 0.8rem 1.5rem; + transition: opacity var(--transition-speed) ease; +} + +button:hover { + opacity: 0.9; +} + +.auto-play-container { + align-items: center; + align-self: flex-end; + display: flex; + gap: 1rem; + margin-top: 1rem; +} + +.switch-label { + color: var(--text-color); + font-family: Arial, sans-serif; + font-size: 0.9rem; + font-weight: normal; +} + +.switch { + display: inline-block; + height: 26px; + position: relative; + width: 50px; +} + +.switch input { + height: 0; + opacity: 0; + width: 0; +} + +.slider { + background-color: #e4e4e4; + border-radius: 0; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + +.slider:before { + background-color: #fff; + bottom: 3px; + content: ''; + height: 20px; + left: 3px; + position: absolute; + transition: .4s; + width: 20px; +} + +input:checked + .slider { + background-color: var(--primary-color); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--primary-color); +} + +input:checked + .slider:before { + transform: translateX(24px); +} + +.status-indicator { + align-self: flex-end; + color: var(--primary-color); + font-family: Arial, sans-serif; + font-size: 0.8rem; + font-weight: bold; + margin-top: 0.5rem; + opacity: 0; +} + +.status-indicator.active { + opacity: 1; +} \ No newline at end of file