diff --git a/index.html b/index.html index 07a61b1..e5b63b8 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,56 @@ - - - Quotes Generator - - - - - -
-
-

Quote Generator

-
+ + + Quotes Generator + + + + + +
+ +

Light Mode

+
+
+
+

Quote Generator

+
-
-
- "Life is what happens when you're busy making other plans" -
+
+
+ "Life is what happens when you're busy making other plans" +
-
- John Lennon
+
- John Lennon
-
-
- - - -
-
-
-
+
+
+ + + +
+
+
+
- - - + + + diff --git a/js/script.js b/js/script.js index 03e8514..9795142 100644 --- a/js/script.js +++ b/js/script.js @@ -1,25 +1,54 @@ -let btn = document.querySelector('#Qbtn'); -let quote = document.querySelector('.quote'); -let writer = document.querySelector('.writer'); -let twitterBtn = document.querySelector('#Tbtn'); + +let btn = document.querySelector("#Qbtn"); +let quote = document.querySelector(".quote"); +let writer = document.querySelector(".writer"); +let twitterBtn = document.querySelector("#Tbtn"); +let mode = document.getElementById("mode"); +let buttons = document.querySelectorAll(".allBtn"); let copyBtn = document.querySelector('#Cbtn'); -btn.addEventListener('click', function () { - let random = Math.floor(Math.random() * quotes.length); - quote.innerHTML = quotes[random].text; - writer.innerHTML = '-' + quotes[random].author; + +btn.addEventListener("click", function () { + let random = Math.floor(Math.random() * quotes.length); + quote.innerHTML = quotes[random].text; + writer.innerHTML = "-" + quotes[random].author; }); -twitterBtn.addEventListener('click', tweetQuote); +twitterBtn.addEventListener('click', tweetQuote); copyBtn.addEventListener('click', copyQuote); + // Tweet Quote function tweetQuote() { - const twitterUrl = `https://twitter.com/intent/tweet?text=${quote.innerText} ${writer.innerText}`; - window.open(twitterUrl, '_blank'); + const twitterUrl = `https://twitter.com/intent/tweet?text=${quote.innerText} ${writer.innerText}`; + window.open(twitterUrl, "_blank"); } + +// change mode +mode.addEventListener("click", () => { + let element = document.body; + element.classList.toggle("dark"); + + let buttons = document.querySelectorAll(".allBtn"); + let modeText = document.querySelector("#modeText"); + + for (let i = 0; i < buttons.length; i++) { + if (buttons[i].style.backgroundColor !== "white") { + buttons[i].style.backgroundColor = "white"; + buttons[i].style.color = "#222"; + modeText.innerHTML = "Dark Mode"; + mode.style.borderColor = "black"; + } else { + buttons[i].style.backgroundColor = "hsl(25, 97%, 53%)"; + buttons[i].style.color = "#fff"; + modeText.innerHTML = "Light Mode"; + mode.style.borderColor = "white"; + } + } +}); + // Copy to Clipboard button function copyQuote() { // Get the quote @@ -27,4 +56,5 @@ function copyQuote() { // Copy quote to clipboard navigator.clipboard.writeText(copiedQuote); -} \ No newline at end of file +} + diff --git a/styles/style.css b/styles/style.css index 477f477..9f73aa2 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,75 +1,111 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: montserrat; + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: montserrat; } body { - display: flex; - justify-content: center; - align-items: center; - background-color: rgb(15, 17, 19); - height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: rgb(15, 17, 19); + color: white; + height: 100vh; } + +.dark { + background-color: #fff; + color: #222; +} + .container { - width: 550px; - height: 450px; + width: 550px; + height: 450px; } .header { - text-align: center; - margin-bottom: 50px; + text-align: center; + margin-bottom: 50px; } + .header h2 { - font-weight: 800; - color: #fff; - font-size: 40px; + font-weight: 800; + font-size: 40px; } + .main-content { - width: 100%; - height: 300px; - padding: 50px 40px; - background-color: hsl(208, 18%, 12%); - border-radius: 15px; - box-shadow: 0 25px 31px 0 rgba(0,0,0,0.3); + width: 100%; + padding: 50px 40px; + background-color: hsl(208, 18%, 12%); + border-radius: 15px; + box-shadow: 0 25px 31px 0 rgba(0, 0, 0, 0.3); +} + +@media screen and (max-width: 500px) { + .main-content { + width: 90%; + margin: 0 auto; + text-align: center; + } } .text-area { - text-align: center; - font-size: 25px; - color: #fff; - line-height: 1.5; - + text-align: center; + font-size: 25px; + color: white; + line-height: 1.5; } + .text-area .icon { - margin-right: 5px; + margin-right: 5px; } .main-content .writer { - text-transform: uppercase; - letter-spacing: 5px; - color: rgb(0, 136, 255); - text-align: center; - margin-top: 20px; - font-size: 25px; - + text-transform: uppercase; + letter-spacing: 5px; + color: rgb(0, 136, 255); + text-align: center; + margin-top: 20px; + font-size: 25px; } .main-content .button-area { - display: grid; - place-items: center; - margin-top: 20px; - padding: 10px 0; -} -.button-area .btn button { - background-color: hsl(25,97%,53%); - color: #fff; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - border: none; - outline: none; - padding: 10px 15px; - + display: grid; + place-items: center; + margin-top: 20px; + padding: 10px 0; +} + +.allBtn { + background-color: hsl(25, 97%, 53%); + color: #fff; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + border: none; + outline: none; + padding: 10px 15px; +} + +#mode { + position: absolute; + top: 30px; + right: 50px; + display: flex; + align-items: center; + cursor: pointer; + border: 1px solid white; + padding: 10px; +} + +#modeIcon { + font-size: 25px; } + +#modeText { + margin-left: 10px; + font-size: 20px; + font-weight: bold; +} + .button-area button:active { - background-color: rgba(215, 97, 12, 0.879); -} \ No newline at end of file + background-color: rgba(215, 97, 12, 0.879); +}