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-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 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 diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..9b1e3c2 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
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..1731022 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -0,0 +1,66 @@ +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 (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 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 your description"); + describe.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 = ""; +}); 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; + } +} 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 @@