diff --git a/week-3/quote-generator/index.html b/week-3/quote-generator/index.html index 30b434bc..b366094f 100644 --- a/week-3/quote-generator/index.html +++ b/week-3/quote-generator/index.html @@ -3,13 +3,22 @@ - Title here + + Quote Generator App -

hello there

-

-

- +
+

Get A Quote 💬

+

+

+ +
+ +
+
diff --git a/week-3/quote-generator/quotes.js b/week-3/quote-generator/quotes.js index 4a4d04b7..88d4c35b 100644 --- a/week-3/quote-generator/quotes.js +++ b/week-3/quote-generator/quotes.js @@ -491,3 +491,46 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +const quote = document.getElementById("quote"); +const author = document.getElementById("author"); +const quoteBtn = document.getElementById("new-quote"); + +const getRandomQuote = () => { + const pickedQuote = pickFromArray(quotes); + quote.innerText = pickedQuote.quote; + author.innerText = pickedQuote.author; +}; + +getRandomQuote(); +quoteBtn.addEventListener("click", getRandomQuote); + +// Auto Play + +const checkbox = document.querySelector("input[name=checkbox]"); + +function autoPlay() { + + let currentCheck; + + return { + start() { + currentCheck = setInterval(getRandomQuote, 1000); + }, + stop() { + clearInterval(currentCheck); + }, + }; +} + +let checkboxChange = autoPlay(); + +checkbox.addEventListener("change", function (event) { + if (event.target.checked) { + checkboxChange.start(); + console.log("Checkbox is checked.."); + } else { + checkboxChange.stop(); + console.log("Checkbox is not checked.."); + } +}); diff --git a/week-3/quote-generator/style.css b/week-3/quote-generator/style.css index 63cedf2d..0b968ec7 100644 --- a/week-3/quote-generator/style.css +++ b/week-3/quote-generator/style.css @@ -1 +1,105 @@ -/** Write your CSS in here **/ +body { + background-image: url("https://hips.hearstapps.com/hmg-prod/images/flower-meanings-pink-tulips-1671510494.jpg"); + /* background-color: #eaa2a2; */ +} + +.quote-box { + background-color: #f5efef; + margin-top: 15rem; + margin-right: 10rem; + margin-left: 10rem; + border-radius: 4rem; + padding: 3rem; + text-align: center; +} + +h1 { + font-weight: bold; + margin-bottom: 5rem; + font-size: xx-large; +} + +p { + font-size: x-large; +} + +#author { + margin-left: 41rem; + margin-top: 3rem; + font-style: italic; +} + +#new-quote { + background-color: #da3871; + color: #f5efef; + font-size: medium; + padding-top: 10px; + padding-bottom: 10px; + padding-right: 20px; + padding-left: 20px; + border-radius: 10px; + border: #da3871; + margin-top: 3rem; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + margin-top: 1em; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #da3871; +} + +input:focus + .slider { + box-shadow: 0 0 1px #f32121; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} +