From b2b84f62ea48683a7853ec6fbb334474dee36353 Mon Sep 17 00:00:00 2001 From: edksam Date: Mon, 20 Jul 2020 01:27:15 +0100 Subject: [PATCH 1/5] Moved all mandatory changes --- Week-1/Homework/mandatory/1-writers.js | 21 ++++++++++++++++----- Week-1/Homework/mandatory/2-water-bottle.js | 11 +++++++---- Week-1/Homework/mandatory/3-groceries.js | 6 ++++++ Week-1/Homework/mandatory/4-codewars.md | 3 +++ 4 files changed, 32 insertions(+), 9 deletions(-) diff --git a/Week-1/Homework/mandatory/1-writers.js b/Week-1/Homework/mandatory/1-writers.js index 82acf6f..91b6a33 100644 --- a/Week-1/Homework/mandatory/1-writers.js +++ b/Week-1/Homework/mandatory/1-writers.js @@ -14,31 +14,42 @@ let writers = [ lastName: "Woolf", occupation: "writer", age: 59, - alive: false + alive: false, }, { firstName: "Zadie", lastName: "Smith", occupation: "writer", age: 41, - alive: true + alive: true, }, { firstName: "Jane", lastName: "Austen", occupation: "writer", age: 41, - alive: false + alive: false, }, { firstName: "bell", lastName: "hooks", occupation: "writer", age: 64, - alive: true - } + alive: true, + }, ]; +writers.forEach(function (writer) { + console.log( + `"Hi, my name is ${writer.firstName} ${writer.lastName}. I am ${writer.age} years old, and work as a ${writer.occupation}."` + ); +}); /* If you want an extra challenge, only `console.log()` the writers that are alive. */ + +writers.forEach(function (writer) { + if (writer.alive === true) { + console.log(`The writer ${writer.firstName} ${writer.lastName} is alive`); + } +}); diff --git a/Week-1/Homework/mandatory/2-water-bottle.js b/Week-1/Homework/mandatory/2-water-bottle.js index 981d7e3..c6dcbd5 100644 --- a/Week-1/Homework/mandatory/2-water-bottle.js +++ b/Week-1/Homework/mandatory/2-water-bottle.js @@ -10,15 +10,18 @@ We made a start on this for you here: let bottle = { volume: 0, - fill: function() { + fill: function () { // calling this function should make you bottles volume = 100; + bottle.volume = 100; }, - drink: function() { + drink: function () { // calling this function should decrease your bottles volume by 10; + bottle.volume = 10; }, - empty: function() { + empty: function () { // this function should return true if your bottles volume = 0 - } + bottle.volume = 0; + }, }; /* diff --git a/Week-1/Homework/mandatory/3-groceries.js b/Week-1/Homework/mandatory/3-groceries.js index 2b34cdb..3aac9cf 100644 --- a/Week-1/Homework/mandatory/3-groceries.js +++ b/Week-1/Homework/mandatory/3-groceries.js @@ -10,3 +10,9 @@ let groceryList = { item2: "", item3: "" }; + +for (let grocery in groceryList) { + groceriesToBuy.push(groceryList[grocery]); +} + +console.log(groceriesToBuy); \ No newline at end of file diff --git a/Week-1/Homework/mandatory/4-codewars.md b/Week-1/Homework/mandatory/4-codewars.md index bac0d95..3f17b36 100644 --- a/Week-1/Homework/mandatory/4-codewars.md +++ b/Week-1/Homework/mandatory/4-codewars.md @@ -15,3 +15,6 @@ Exercises: - [Crash Override](https://www.codewars.com/kata/crash-override/train/javascript) - [Job Matching #1](https://www.codewars.com/kata/56c22c5ae8b139416c00175d/train/javascript) - [Split the Bill](https://www.codewars.com/kata/5641275f07335295f10000d0/train/javascript) + + +Codewar solutions link: https://www.codewars.com/users/edksam/completed_solutions \ No newline at end of file From 657fda311129fad75031ade3c936236aba06d1e0 Mon Sep 17 00:00:00 2001 From: edksam Date: Mon, 20 Jul 2020 02:41:44 +0100 Subject: [PATCH 2/5] Exercise-1 updated --- Week-1/InClass/B-objects-get-set/exercise-1.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/Week-1/InClass/B-objects-get-set/exercise-1.js b/Week-1/InClass/B-objects-get-set/exercise-1.js index 6591384..1717d5b 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-1.js +++ b/Week-1/InClass/B-objects-get-set/exercise-1.js @@ -3,16 +3,14 @@ */ let kitten = { - ageMonths: 3, - isFemale: true, - furColour: "brown" + ageMonths: 3, + isFemale: true, + furColour: "brown", }; // YOUR CODE GOES BELOW HERE +console.log(kitten.ageMonths); +console.log(kitten.isFemale); +console.log(kitten.furColour); - - - - - -// YOUR CODE GOES ABOVE HERE \ No newline at end of file +// YOUR CODE GOES ABOVE HERE From 0064abafaab8a36eadb6e2b63810caf7e4d2d6fb Mon Sep 17 00:00:00 2001 From: edksam Date: Sat, 25 Jul 2020 20:12:40 +0100 Subject: [PATCH 3/5] Question solved and project 1st part done --- .vscode/settings.json | 3 + .../mandatory/2-exercises/exercises.js | 75 +++++++-- Week-2/Homework/mandatory/3-project/README.md | 2 +- .../Homework/mandatory/3-project/js/main.js | 85 +++++++++++ .../mandatory/3-project/styles/style.css | 142 +++++++++--------- 5 files changed, 225 insertions(+), 82 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..b98b1f2 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -15,6 +15,14 @@ */ function exerciseOne(arrayOfPeople) { let content = document.querySelector("#content"); + arrayOfPeople.forEach((person) => { + h1 = document.createElement("h1"); + h2 = document.createElement("h2"); + h1.textContent = person.name; + h2.textContent = person.job; + content.appendChild(h1); + content.appendChild(h2); + }); } /** @@ -25,12 +33,23 @@ function exerciseOne(arrayOfPeople) { * */ function exerciseTwo(shopping) { - //Write your code in here + let contentDiv = document.getElementById("content"); + // create Element of unordered list inside div + let list = document.createElement("ul"); + contentDiv.appendChild(list); + + shopping.forEach((shoppingItem) => { + let li = document.createElement("li"); + li.textContent = shoppingItem; + // let arrItem = document.createTextNode(shoppingItem); + // li.appendChild(arrItem); + list.appendChild(li); + }); } /** I'd like to display my three favorite books inside a nice webpage! - + const books = [ { title: "The Design of Everyday Things", @@ -48,17 +67,53 @@ function exerciseTwo(shopping) { alreadyRead: true } ]; - + Iterate through the array of books. - For each book, create a

element with the book title and author and append it to the page. - Use a

    and
  • to display the books. - Add an to each book that links to a URL of the book cover. - Change the style of the book depending on whether you have read it (green) or not (red). - + The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ + **/ function exerciseThree(books) { //Write your code in here + + books[0].src = + "https://images-na.ssl-images-amazon.com/images/I/410RTQezHYL._SX326_BO1,204,203,200_.jpg"; + books[1].src = + "https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1328321953l/10814191.jpg"; + books[2].src = + "https://images-na.ssl-images-amazon.com/images/I/418M2053aNL.jpg"; + + let contentDiv = document.querySelector("#content"); + let ul = document.createElement("ul"); + contentDiv.appendChild(ul); + + books.forEach((book) => { + // create a

    element + //Assign textContent with the book title and author + // append it to the page. + let li = document.createElement("li"); + let p = document.createElement("p"); + let img = document.createElement("img"); + let a = document.createElement("a"); + + p.textContent = book.title + " - " + book.author; + img.src = book.src; + // img.setAttribute("src", book.src) + + li.appendChild(p); + li.appendChild(img); + ul.appendChild(li); + + if (book.alreadyRead) { + li.style.backgroundColor = "green"; + } else { + li.style.backgroundColor = "red"; + } + }); } // @@ -74,10 +129,10 @@ function exerciseThree(books) { let people = [ { name: "Chris", job: "Teacher" }, { name: "Joanna", job: "Student" }, - { name: "Boris", job: "Prime Minister" } + { name: "Boris", job: "Prime Minister" }, ]; -exerciseOne(people); +// exerciseOne(people); let shopping = ["Milk", "Break", "Eggs", "A Dinosaur", "Cake", "Sugar", "Tea"]; @@ -87,18 +142,18 @@ const books = [ { title: "The Design of Everyday Things", author: "Don Norman", - alreadyRead: false + alreadyRead: false, }, { title: "The Most Human Human", author: "Brian Christian", - alreadyRead: true + alreadyRead: true, }, { title: "The Pragmatic Programmer", author: "Andrew Hunt", - alreadyRead: true - } + alreadyRead: true, + }, ]; exerciseThree(books); diff --git a/Week-2/Homework/mandatory/3-project/README.md b/Week-2/Homework/mandatory/3-project/README.md index 5caa8a3..8913845 100644 --- a/Week-2/Homework/mandatory/3-project/README.md +++ b/Week-2/Homework/mandatory/3-project/README.md @@ -1,6 +1,6 @@ # For homework -## Part 1 +## Part 1 Open `index.html` in your browser. Notice there are 3 buttons: blue, orange and green. Edit the file `./js/main.js` and add the following functionality: diff --git a/Week-2/Homework/mandatory/3-project/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index e69de29..8f7c573 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -0,0 +1,85 @@ +const blueBtn = document.querySelector("#blueBtn"); +const orangeBtn = document.querySelector("#orangeBtn"); +const greenBtn = document.querySelector("#greenBtn"); +const jumbotron = document.querySelector(".jumbotron"); +const donateABikeBtn = document.querySelector(".buttons a"); +const volunteer = document.querySelector(".buttons .btn-secondary"); + +blueBtn.addEventListener("click", function () { + jumbotron.style.backgroundColor = "#588fbd"; + donateABikeBtn.style.backgroundColor = "#ffa500"; + volunteer.style.backgroundColor = "#000000"; + volunteer.style.color = "#ffffff"; +}); + +orangeBtn.addEventListener("click", function () { + jumbotron.style.backgroundColor = "#f0ad4e"; + donateABikeBtn.style.backgroundColor = "#5751fd"; + volunteer.style.backgroundColor = "##31b0d5"; + volunteer.style.color = "#ffffff"; +}); + +greenBtn.addEventListener("click", function () { + jumbotron.style.backgroundColor = "#87ca8a"; + donateABikeBtn.style.backgroundColor = "black"; + volunteer.style.backgroundColor = "#8c9c08`"; + volunteer.style.color = "#ffffff"; +}); + +// Form Validation +const submitBtn = document.querySelector("[type=submit]"); +const name = document.querySelector("#example-text-input"); +const email = document.querySelector("#exampleInputEmail1"); +const describe = document.querySelector("#exampleTextarea"); + +submitBtn.addEventListener("click", function (event) { + event.preventDefault(); + + const emailMatch = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; + + if (email.value.length <= 0) { + alert("Please enter an email"); + email.style.backgroundColor = "red"; + } + + if (name.value.length <= 0) { + alert("Please enter your name"); + name.style.backgroundColor = "red"; + } + + if (describe.value.length <= 0) { + alert("Please enter a description"); + describe.style.backgroundColor = "red"; + } + + // if ( + // email.value.length >= 0 && + // name.value.length >= 0 && + // describe.value.length >= 0 + // ) { + // alert("Thank you for filling the form"); + // name.value = ""; + // email.value = ""; + // describe.value = ""; + // } + + //Email Validation + // if (!email.value.match(emailMatch)) { + // alert("Please enter a valid email"); + // email.style.backgroundColor = "yellow"; + // } else if ( + // email.value.length >= 0 && + // name.value.length >= 0 && + // describe.value.length >= 0 + // ) { + // alert("Thank you for filling the form"); + // name.value = ""; + // email.value = ""; + // describe.value = ""; + // } + + if (email.validity.patternMismatch) { + alert("Enter Valid Email"); + email.style.backgroundColor = "red"; + } +}); diff --git a/Week-2/Homework/mandatory/3-project/styles/style.css b/Week-2/Homework/mandatory/3-project/styles/style.css index 4968544..74406e6 100644 --- a/Week-2/Homework/mandatory/3-project/styles/style.css +++ b/Week-2/Homework/mandatory/3-project/styles/style.css @@ -8,152 +8,152 @@ html, body { - font-family: "Source Sans Pro",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; + font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .site-footer { - margin-top: 4em; + margin-top: 4em; } .site-footer p { - border-top: 1px solid #dccdc6; - padding-top: 2em; - padding-bottom: 2em; + border-top: 1px solid #dccdc6; + padding-top: 2em; + padding-bottom: 2em; } .navbar-brand > img { - max-height: 40px; - width: auto; + max-height: 40px; + width: auto; } .navbar-light .navbar-nav .nav-link { - color: #292b2c; - font-weight: 600; - text-transform: uppercase; + color: #292b2c; + font-weight: 600; + text-transform: uppercase; } /* Buttons */ .btn { - border-radius: 0.15em; + border-radius: 0.15em; } /* Alert */ .alert { - position: relative; - margin-top: 2em; - margin-bottom: 3em; - padding-top: 1.5em; - padding-bottom: 1.5em; - border: 1px solid #dccdc6; - border-radius: 0; - font-size: 0.85rem; - line-height: 1.3em; - background: transparent; - color: #292b2c; + position: relative; + margin-top: 2em; + margin-bottom: 3em; + padding-top: 1.5em; + padding-bottom: 1.5em; + border: 1px solid #dccdc6; + border-radius: 0; + font-size: 0.85rem; + line-height: 1.3em; + background: transparent; + color: #292b2c; } .alert:before { - content: ''; - position: absolute; - left: -1px; - top: 0; - height: 100%; - width: 1px; - background: #ce5f31; + content: ""; + position: absolute; + left: -1px; + top: 0; + height: 100%; + width: 1px; + background: #ce5f31; } /* Jumbotron */ .jumbotron { - border-radius: 0; + border-radius: 0; } /* Headings */ .heading-underline { - position: relative; - margin-bottom: 2em; - padding-bottom: 0.5em; - border-bottom: 1px solid #dccdc6; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; + position: relative; + margin-bottom: 2em; + padding-bottom: 0.5em; + border-bottom: 1px solid #dccdc6; + font-size: 1rem; + font-weight: 600; + text-transform: uppercase; } .heading-underline:before { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 25%; - height: 1px; - max-width: 100px; - background: #ce5f31; + content: ""; + position: absolute; + bottom: -1px; + left: 0; + width: 25%; + height: 1px; + max-width: 100px; + background: #ce5f31; } /* Article */ .article { - margin-bottom: 2em; + margin-bottom: 2em; } .article-title { - margin-bottom: 0.5em; - font-weight: 700; + margin-bottom: 0.5em; + font-weight: 700; } .article-read-more a { - font-size: 0.85em; - font-weight: 700; - text-decoration: uppercase; + font-size: 0.85em; + font-weight: 700; + text-decoration: uppercase; } .article-read-more a:hover, .article-read-more a:focus { - text-decoration: none; + text-decoration: none; } .article-read-more .fa { - margin-right: 0.5em; - color: #ce5f31; + margin-right: 0.5em; + color: #ce5f31; } .article-read-more:last-child { - margin-bottom: 0; + margin-bottom: 0; } .red { - background-color: red; + background-color: red; } .addArticle { - margin-bottom: 10px; + margin-bottom: 10px; } #addArticleBtn { - margin-left: 20px; - height: 37px; + margin-left: 20px; + height: 37px; } .colorButton { - margin-bottom: 20px; - margin-right: 20px; - width: 100px; - height: 50px; + margin-bottom: 20px; + margin-right: 20px; + width: 100px; + height: 50px; } #blueBtn { - background: #588fbd; + background: #588fbd; } #orangeBtn { - background: #f0ad4e; + background: #f0ad4e; } #greenBtn { - background: #87ca8a + background: #87ca8a; } @media screen and (min-width: 992px) { - - .navbar-brand > img { - max-height: 80px; - } -} \ No newline at end of file + .navbar-brand > img { + max-height: 80px; + } +} From aa0d1419d673afb51a654e7ae73885b686ddd33a Mon Sep 17 00:00:00 2001 From: edksam Date: Sun, 26 Jul 2020 23:43:29 +0100 Subject: [PATCH 4/5] Final testing --- .../mandatory/2-exercises/exercises.js | 2 +- .../Homework/mandatory/3-project/js/main.js | 59 +++++++------------ 2 files changed, 21 insertions(+), 40 deletions(-) diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index b98b1f2..9b1e3c2 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -132,7 +132,7 @@ let people = [ { name: "Boris", job: "Prime Minister" }, ]; -// exerciseOne(people); + exerciseOne(people); let shopping = ["Milk", "Break", "Eggs", "A Dinosaur", "Cake", "Sugar", "Tea"]; diff --git a/Week-2/Homework/mandatory/3-project/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index 8f7c573..1731022 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -15,14 +15,14 @@ blueBtn.addEventListener("click", function () { orangeBtn.addEventListener("click", function () { jumbotron.style.backgroundColor = "#f0ad4e"; donateABikeBtn.style.backgroundColor = "#5751fd"; - volunteer.style.backgroundColor = "##31b0d5"; + volunteer.style.backgroundColor = "#31b0d5"; volunteer.style.color = "#ffffff"; }); greenBtn.addEventListener("click", function () { jumbotron.style.backgroundColor = "#87ca8a"; donateABikeBtn.style.backgroundColor = "black"; - volunteer.style.backgroundColor = "#8c9c08`"; + volunteer.style.backgroundColor = "#8c9c08"; volunteer.style.color = "#ffffff"; }); @@ -32,54 +32,35 @@ const name = document.querySelector("#example-text-input"); const email = document.querySelector("#exampleInputEmail1"); const describe = document.querySelector("#exampleTextarea"); -submitBtn.addEventListener("click", function (event) { - event.preventDefault(); - - const emailMatch = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; +submitBtn.addEventListener("click", function (e) { + e.preventDefault(); + //check for email validity + let emailMatch = "@"; + // Check for non-empty + if (!email.value.includes(emailMatch) || email.value.length <= 0) { + alert("Please enter a valid email"); + email.style.backgroundColor = "red"; + } if (email.value.length <= 0) { - alert("Please enter an email"); + alert("Please enter your email"); email.style.backgroundColor = "red"; } - if (name.value.length <= 0) { alert("Please enter your name"); name.style.backgroundColor = "red"; } - if (describe.value.length <= 0) { - alert("Please enter a description"); + alert("Please enter your description"); describe.style.backgroundColor = "red"; } - // if ( - // email.value.length >= 0 && - // name.value.length >= 0 && - // describe.value.length >= 0 - // ) { - // alert("Thank you for filling the form"); - // name.value = ""; - // email.value = ""; - // describe.value = ""; - // } - - //Email Validation - // if (!email.value.match(emailMatch)) { - // alert("Please enter a valid email"); - // email.style.backgroundColor = "yellow"; - // } else if ( - // email.value.length >= 0 && - // name.value.length >= 0 && - // describe.value.length >= 0 - // ) { - // alert("Thank you for filling the form"); - // name.value = ""; - // email.value = ""; - // describe.value = ""; - // } - - if (email.validity.patternMismatch) { - alert("Enter Valid Email"); - email.style.backgroundColor = "red"; + // check for all fields entered + if (!email.value == "" && !name.value == "" && !describe.value == "") { + alert("Thank you for filling the form"); } + + email.value = ""; + name.value = ""; + describe.value = ""; }); From 1586dc062df08f792114fcfd1e66ca79f4d24f54 Mon Sep 17 00:00:00 2001 From: edksam Date: Sun, 2 Aug 2020 23:31:00 +0100 Subject: [PATCH 5/5] Last changes --- .../mandatory/1-alarmclock/alarmclock.js | 23 +++++- .../mandatory/2-quotegenerator/index.html | 32 +++++++- .../mandatory/2-quotegenerator/quotes.js | 20 +++++ .../mandatory/2-quotegenerator/style.css | 79 +++++++++++++++++++ 4 files changed, 152 insertions(+), 2 deletions(-) diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..4e4c315 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,25 @@ -function setAlarm() {} +function setAlarm() { + let alarmCounter = document.querySelector("#timeRemaining"); + let bodyClass = document.querySelector(".centre"); + setAlarmTime = document.querySelector("#alarmSet"); + let inputValue = setAlarmTime.value; + let minutes = Math.floor(inputValue / 60); + let seconds = inputValue % 60; + let interval = setInterval(() => { + if (minutes > 0 && seconds === 0) { + minutes--; + seconds = 59; + } + if (seconds === 0) { + clearInterval(interval); + audio.play(); + bodyClass.style.backgroundColor = "#B5AEA8"; + } + alarmCounter.textContent = `Time Remaining: ${minutes} : ${seconds}`; + seconds--; + }, 1000); + audio.pause(); +} // DO NOT EDIT BELOW HERE diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..4645f17 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -2,7 +2,10 @@ Quote Generator - + + +

    + +
    + + + +
    + +
    + + + +
    + +
    + + +
    +
    + + + + diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..025971f 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -490,3 +490,23 @@ const quotes = [ author: "Zig Ziglar", }, ]; + +const quoteText = document.getElementById("quote"); +const authorText = document.getElementById("author"); +const newQuoteBtn = document.getElementById("new-quote"); + +async function getQuote() { + try { + const response = await pickFromArray(quotes); + const data = await response; + quoteText.innerText = data.quote; + authorText.innerText = data.author; + } catch (error) { + console.log("I'm sorry quotes don finish"); + } +} +//On load +getQuote(); + +//Button Click function +newQuoteBtn.addEventListener("click", getQuote); diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..2f9b8a7 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,80 @@ /** Write your CSS in here **/ +html { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + background-color: #ffffff; + background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 28v-4L36 12 24 24 12 12 0 24v4l4 4-4 4v4l12 12 12-12 12 12 12-12v-4l-4-4 4-4zM8 32l-6-6 10-10 10 10-6 6 6 6-10 10L2 38l6-6zm12 0l4-4 4 4-4 4-4-4zm12 0l-6-6 10-10 10 10-6 6 6 6-10 10-10-10 6-6zM0 16L10 6 4 0h4l4 4 4-4h4l-6 6 10 10L34 6l-6-6h4l4 4 4-4h4l-6 6 10 10v4L36 8 24 20 12 8 0 20v-4zm0 32l10 10-6 6h4l4-4 4 4h4l-6-6 10-10 10 10-6 6h4l4-4 4 4h4l-6-6 10-10v-4L36 56 24 44 12 56 0 44v4z' fill='%232b3332' fill-opacity='0.13' fill-rule='evenodd'/%3E%3C/svg%3E"); + color: #000000; + font-family: "Montserrat", sans-serif; + text-align: center; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; +} +.quote-container { + width: auto; + max-width: 900px; + padding: 20px 30px; + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.4); + box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2); +} +.quote-text { + font-size: 2.75rem; +} +.long-quote { + font-size: 2rem; +} +.fa-quote-left { + font-size: 4rem; +} +.quote-author { + margin-top: 15px; + font-size: 2rem; + font-weight: 400; + font-style: italic; +} +.button-container { + margin-top: 15px; + display: flex; + justify-content: space-between; +} +button { + cursor: pointer; + font-size: 1.2rem; + height: 2.5rem; + border: none; + border-radius: 10px; + color: #ffffff; + background-color: #333333; + outline: none; + padding: 0.5rem 1.8rem; + box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65); +} +button:hover { + filter: brightness(110%); +} +button:active { + transform: translate(0, 0.3rem); + box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65); +} +.twitter-button:hover { + color: #38a1f3; +} +.fa-twitter { + font-size: 1.5rem; +} +/* Media Qury */ +@media screen and (max-width: 1000px) { + .quote-container { + margin: auto 10px; + } + .quote-text { + font-size: 2.5rem; + } +}