diff --git a/Prep/package.json b/Prep/package.json new file mode 100644 index 000000000..5003ba999 --- /dev/null +++ b/Prep/package.json @@ -0,0 +1,15 @@ +{ + "name": "prep", + "version": "1.0.0", + "description": "", + "main": "mean.js", + "scripts": { + "test": "jest" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "jest": "^30.2.0" + } +} diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..8a046230f 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,18 @@ - Title here + Quote Generator App + -

hello there

-

-

- +

Quote Generator

+

Loading...

+

Author will appear here.

+ + + + + OFF diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..bc52cede6 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,40 @@ +function pickRandomQuote() { + return pickFromArray(quotes); +} + +function displayQuote() { + const randomQuote = pickRandomQuote(); + console.log("Displaying Quote:", randomQuote); + document.getElementById("quote").innerText = randomQuote.quote; + document.getElementById("author").innerText = randomQuote.author; +} + +let autoPlayInterval; + +function toggleAutoPlay() { + const autoPlayStatus = document.getElementById("auto-play-status"); + const isChecked = document.getElementById("auto-play-toggle").checked; + if (isChecked) { + autoPlayStatus.innerText = "ON"; + + autoPlayInterval = setInterval(displayQuote, 5000); + } else { + autoPlayStatus.innerText = "OFF"; + + clearInterval(autoPlayInterval); + } +} + +document.addEventListener("DOMContentLoaded", function () { + document.getElementById("new-quote").addEventListener("click", displayQuote); + document + .getElementById("auto-play-toggle") + .addEventListener("change", toggleAutoPlay); + + // Initially display a quote + displayQuote(); +}); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..c4a975879 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,103 @@ -/** Write your CSS in here **/ +body { + font-family: "Roboto", sans-serif; + text-align: center; + margin: 0; + padding: 0; + background: linear-gradient(135deg, #f7c5d6, #c6f7ff); + color: #333; +} + +h1 { + color: #5e5e5e; + font-size: 3.5em; + margin-top: 40px; + font-weight: 600; + letter-spacing: 2px; +} + +#quote-box { + background-color: #ffffff; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); + padding: 40px; + max-width: 700px; + margin: 50px auto; + text-align: center; + color: #444; + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; +} + +#quote-box:hover { + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); +} + +#quote { + font-size: 2.2em; + font-weight: bold; + color: #333; + margin-bottom: 30px; + font-style: italic; + line-height: 1.5; +} + +#author { + font-size: 1.3em; + color: #888; + margin-top: 20px; + font-weight: 500; + letter-spacing: 1px; +} + +button { + font-size: 1.2em; + padding: 15px 30px; + background-color: #ff7c84; + color: white; + border: none; + border-radius: 30px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; + margin-top: 30px; +} + +button:hover { + background-color: #f6b0b8; + transform: translateY(-5px); +} + +#auto-play-toggle { + margin-top: 20px; + width: 50px; + height: 25px; + border-radius: 15px; + background-color: #ddd; + position: relative; + transition: background-color 0.3s ease; +} + +#auto-play-toggle:checked { + background-color: #4caf50; +} + +#auto-play-status { + font-weight: bold; + margin-left: 10px; + font-size: 1.1em; + color: #333; + font-family: "Roboto", sans-serif; +} + +.toggle-container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 30px; +} + +.container { + width: 100%; + max-width: 800px; + margin: 0 auto; + padding: 20px; +}