diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..7b59ded28 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,37 @@ - + - Title here + Quote generator app + -

hello there

-

-

- +
+

Quote Generator

+ +
+

+

+
+ +
+ + +
+ + +
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..06f4dddca 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,82 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +// My code starts here +let autoPlayInterval = null; +let isAutoPlaying = false; + +// Function to update the displayed quote +function updateQuote() { + const randomQuote = pickFromArray(quotes); + const quoteElement = document.getElementById('quote'); + const authorElement = document.getElementById('author'); + + if (quoteElement && authorElement) { + quoteElement.textContent = `"${randomQuote.quote}"`; + authorElement.textContent = `— ${randomQuote.author}`; + } +} + +// Function to start auto-play +function startAutoPlay(intervalSeconds = 60) { + if (autoPlayInterval) { + clearInterval(autoPlayInterval); + } + autoPlayInterval = setInterval(updateQuote, intervalSeconds * 1000); + isAutoPlaying = true; +} + +// Function to stop auto-play +function stopAutoPlay() { + if (autoPlayInterval) { + clearInterval(autoPlayInterval); + autoPlayInterval = null; + } + isAutoPlaying = false; +} + +// Function to update the auto-play status display +function updateAutoPlayStatus() { + const statusSpan = document.getElementById('auto-play-status'); + if (statusSpan) { + statusSpan.textContent = isAutoPlaying ? 'ON' : 'OFF'; + statusSpan.className = `status ${isAutoPlaying ? 'status-on' : 'status-off'}`; + } +} + +// Initialize the app when the DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + // Display initial random quote + updateQuote(); + + // Get DOM elements + const newQuoteBtn = document.getElementById('new-quote'); + const autoPlayToggle = document.getElementById('auto-play-toggle'); + + // Add event listener for new quote button + if (newQuoteBtn) { + newQuoteBtn.addEventListener('click', () => { + updateQuote(); + }); + } + + // Add event listener for auto-play toggle + if (autoPlayToggle) { + autoPlayToggle.addEventListener('change', (event) => { + if (event.target.checked) { + // For testing, use 5 seconds instead of 60 seconds + // In production, you might want to use 60 seconds + // You can uncomment the appropriate line below + startAutoPlay(5); // Using 5 seconds for testing + // startAutoPlay(60); // Use this for production with 60 seconds + } else { + stopAutoPlay(); + } + updateAutoPlayStatus(); + }); + } + + // Initialize status display + updateAutoPlayStatus(); +}); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..d3d0f636c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,211 @@ /** Write your CSS in here **/ +/** Write your CSS in here **/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.container { + max-width: 800px; + width: 100%; + background: white; + border-radius: 20px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + padding: 40px; + animation: fadeIn 0.5s ease-in; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 30px; + font-size: 2.5rem; + font-weight: 600; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.quote-container { + background: #f8f9fa; + border-radius: 15px; + padding: 30px; + margin-bottom: 30px; + border-left: 5px solid #667eea; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.quote-text { + font-size: 1.5rem; + line-height: 1.6; + color: #333; + margin-bottom: 20px; + font-style: italic; + text-align: center; +} + +.author-text { + font-size: 1.1rem; + color: #667eea; + text-align: center; + font-weight: 500; +} + +.controls { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + flex-wrap: wrap; +} + +.btn { + padding: 12px 24px; + font-size: 1rem; + font-weight: 600; + border: none; + border-radius: 10px; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); +} + +.btn-primary:active { + transform: translateY(0); +} + +.auto-play-control { + display: flex; + align-items: center; + gap: 15px; +} + +.auto-play-label { + font-size: 1rem; + color: #555; + font-weight: 500; +} + +.status { + font-weight: bold; + padding: 2px 8px; + border-radius: 5px; + margin-left: 5px; +} + +.status-on { + background-color: #28a745; + color: white; +} + +.status-off { + background-color: #dc3545; + color: white; +} + +/* Toggle Switch */ +.toggle-switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.toggle-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: 0.4s; + border-radius: 34px; +} + +.toggle-slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + transition: 0.4s; + border-radius: 50%; +} + +input:checked + .toggle-slider { + background-color: #667eea; +} + +input:checked + .toggle-slider:before { + transform: translateX(26px); +} + +/* Responsive design */ +@media (max-width: 768px) { + .container { + padding: 20px; + } + + h1 { + font-size: 1.8rem; + } + + .quote-text { + font-size: 1.2rem; + } + + .controls { + flex-direction: column; + } + + .btn { + width: 100%; + } + + .auto-play-control { + width: 100%; + justify-content: space-between; + } +}