diff --git a/Week-1/Homework/mandatory/0-classwork.md b/Week-1/Homework/mandatory/0-classwork.md index 33d2658..cd31793 100644 --- a/Week-1/Homework/mandatory/0-classwork.md +++ b/Week-1/Homework/mandatory/0-classwork.md @@ -2,4 +2,4 @@ Firstly, complete any exercises you did not complete during class. They are essential practice for the rest of the homework tasks. -If you get stuck, reach out to your classmates on Slack for help! \ No newline at end of file +If you get stuck, reach out to your classmates on Slack for help! diff --git a/Week-1/Homework/mandatory/1-writers.js b/Week-1/Homework/mandatory/1-writers.js index 82acf6f..dee5b49 100644 --- a/Week-1/Homework/mandatory/1-writers.js +++ b/Week-1/Homework/mandatory/1-writers.js @@ -39,6 +39,15 @@ let writers = [ } ]; + + + +for (const key of writers) { + console.log(`Hi, my name is ${key["firstName"]} ${key["lastName"]}. I am ${key["age"]} years old, and work as a ${key["occupation"]}.`); + + } + + /* If you want an extra challenge, only `console.log()` the writers that are alive. */ diff --git a/Week-1/Homework/mandatory/2-water-bottle.js b/Week-1/Homework/mandatory/2-water-bottle.js index 981d7e3..9458069 100644 --- a/Week-1/Homework/mandatory/2-water-bottle.js +++ b/Week-1/Homework/mandatory/2-water-bottle.js @@ -11,16 +11,23 @@ We made a start on this for you here: let bottle = { volume: 0, fill: function() { + + this.volume = 100; // calling this function should make you bottles volume = 100; }, drink: function() { + this.volume = this.volume - 10; // calling this function should decrease your bottles volume by 10; }, empty: function() { + if (this.volume === 0) + return true // this function should return true if your bottles volume = 0 } }; +bottle.fill(); + /* --TIP-- @@ -38,4 +45,4 @@ bottle.drink(); if (!bottle.empty()) { console.log(`bottles volume = ${bottle.volume}`); } -console.log("Above volume should be: 70"); +console.log("Above volume should be: 70"); diff --git a/Week-1/Homework/mandatory/3-groceries.js b/Week-1/Homework/mandatory/3-groceries.js index 2b34cdb..31a221c 100644 --- a/Week-1/Homework/mandatory/3-groceries.js +++ b/Week-1/Homework/mandatory/3-groceries.js @@ -6,7 +6,10 @@ let groceriesToBuy = []; let groceryList = { - item1: "", - item2: "", - item3: "" + item1: "Potatoes", + item2: "Orange Juice", + item3: "Rice" }; + +groceriesToBuy = Object.values(groceryList) +console.log(groceriesToBuy) \ No newline at end of file diff --git a/Week-2/Homework/mandatory/.DS_Store b/Week-2/Homework/mandatory/.DS_Store new file mode 100644 index 0000000..e1a74a5 Binary files /dev/null and b/Week-2/Homework/mandatory/.DS_Store differ diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..eb3f8d7 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -13,8 +13,18 @@ * ..... * */ + function exerciseOne(arrayOfPeople) { let content = document.querySelector("#content"); + + for (let i = 0; i < arrayOfPeople.length; i++) { + let h = document.createElement("H1"); + let t = document.createElement("H2"); + h.innerText = arrayOfPeople[i].name; + t.innerText = arrayOfPeople[i].job; + content.appendChild(h); + content.appendChild(t); + } } /** @@ -25,7 +35,12 @@ function exerciseOne(arrayOfPeople) { * */ function exerciseTwo(shopping) { - //Write your code in here + document.createElement("ul"); + for (let i = 0; i < shopping.length; i++) { + let li = document.createElement("li"); + li.innerText = shopping[i]; + content.appendChild(li); + } } /** @@ -57,8 +72,32 @@ function exerciseTwo(shopping) { The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ **/ +let bookpics = [ + "https://mitpress.mit.edu/sites/default/files/9780262640374.jpg", + "https://images.gr-assets.com/books/1295465264l/8884400.jpg", + "https://upload.wikimedia.org/wikipedia/en/8/8f/The_pragmatic_programmer.jpg", +]; + function exerciseThree(books) { - //Write your code in here + + let unorderedList = document.createElement("ul"); + content.appendChild(unorderedList); + for (let i = 0; i < bookpics.length; i++) { + let p = document.createElement("p"); + let list = document.createElement("li"); + let images = document.createElement("img"); + p.innerText = books[i].title + " " + books[i].author; + images.src = bookpics[i]; + unorderedList.appendChild(list); + list.appendChild(p); + list.appendChild(images); + + if (books[i].alreadyRead === true) { + list.style.backgroundColor = "green"; + } else { + list.style.backgroundColor = "red"; + } + } } // @@ -74,7 +113,7 @@ 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); @@ -87,18 +126,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/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index e69de29..5febf24 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -0,0 +1,77 @@ +/* clicking blue */ + +let blueButton = document.getElementById("blueBtn"); +let jumbotron = document.querySelector(".jumbotron"); +let donateBikeButton = document.querySelector(".buttons a:first-of-type"); +let volunteerbtn = document.querySelector(".buttons a:last-of-type"); +let onBlueButtonClick = function () { + jumbotron.style.backgroundColor = `#588fbd`; + donateBikeButton.style.backgroundColor = "#ffa500"; + volunteerbtn.style.backgroundColor = "black"; + volunteerbtn.style.color = "white"; +}; +blueButton.addEventListener("click", onBlueButtonClick); + +/* Clicking orange */ + +let orangeButton = document.getElementById("orangeBtn"); + +let onOrangeButtonClick = function () { + jumbotron.style.backgroundColor = `#f0ad4e`; + donateBikeButton.style.backgroundColor = "#5751fd"; + volunteerbtn.style.backgroundColor = "#31b0d5"; + volunteerbtn.style.color = "white"; +}; +orangeButton.addEventListener("click", onOrangeButtonClick); + +/* Clicking Green */ + +let greenButton = document.getElementById("greenBtn"); + +let onGreenButtonClick = function () { + jumbotron.style.backgroundColor = `#87ca8a`; + donateBikeButton.style.backgroundColor = "black"; + volunteerbtn.style.backgroundColor = "#8c9c08"; +}; +greenButton.addEventListener("click", onGreenButtonClick); + +/* Validate User */ + +let inputEmail = document.getElementById("exampleInputEmail1"); +let inputName = document.getElementById("example-text-input"); +let description = document.getElementById("exampleTextarea"); +let submitButton = document.querySelector("form button"); + +let validateUser = function (e) { + e.preventDefault(); + let emailValue = inputEmail.value; + let nameValue = inputName.value; + let descriptionValue = description.value; + if (emailValue.trim() === "" || emailValue.includes("@") === false) { + inputEmail.style.backgroundColor = "red"; + } else { + inputEmail.style.backgroundColor = "white"; + } + + if (nameValue.trim() === "") { + inputName.style.backgroundColor = "red"; + } else { + inputName.style.backgroundColor = "white"; + } + + if (descriptionValue.trim() === "") { + description.style.backgroundColor = "red"; + } else { + description.style.backgroundColor = "white"; + } + + if ( + descriptionValue.trim() !== "" && + nameValue.trim() !== "" && + emailValue.trim() !== "" && + emailValue.includes("@") === true + ) { + alert("Thanks mate"); + } +}; +submitButton.addEventListener("click", validateUser); diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..d70eb2d 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,36 @@ -function setAlarm() {} +//set interval +/* 1. When the `Set Alarm` button is clicked, get the value of the input field +2. When you have the input field value, set the title to the correct value +3. Work out how to update the `Time Remaining` title every second +4. When the remaining time left is 0, play the alarm sound + */ + + + + + + +function setAlarm() { +let inputSet = document.getElementById("alarmSet"); +let inputValue = parseInt(inputSet.value); +let title = document.getElementById("timeRemaining"); + +let countDown = setInterval(function() { +let minutes = Math.floor(inputValue / 60); +let seconds = inputValue % 60; +title.textContent = ("Time Remaining: ") + (minutes>9?minutes:"0" +minutes) + ":" + (seconds>9?seconds:"0" + seconds); + + if(inputValue === 0){ + playAlarm(); + + return clearInterval(countDown); + + } + inputValue--; + }, 1000); + + } + // DO NOT EDIT BELOW HERE diff --git a/Week-3/Homework/mandatory/1-alarmclock/task.md b/Week-3/Homework/mandatory/1-alarmclock/task.md index f32e355..8647833 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/task.md +++ b/Week-3/Homework/mandatory/1-alarmclock/task.md @@ -36,3 +36,6 @@ If you have time and want to do more why not try - Make the background change color when the alarm clock finishes - Try making the background flash! - Could you add `pause` functionality so that the count down stops and then you restart it later? + + +set interval \ No newline at end of file diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..370e96a 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -2,7 +2,7 @@ Quote Generator - + - +
+ +

If your looking for inspiration you've come to the wrong place

+
+ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..a45c2fd 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,15 @@ +let button = document.getElementById("smlbtn"); +let p = document.querySelector("p") + +let onButtonClick = function() { + p.textContent = + pickFromArray(quotes).quote + "..." + " " + + "says" + + " " + + pickFromArray(quotes).author; +} +button.addEventListener("click", onButtonClick); + // DO NOT EDIT BELOW HERE // A function which will return one item, at diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..e999d21 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,5 @@ /** Write your CSS in here **/ +p { + color: green; + border: 1px dotted blue +} \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..7650f4e 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -1,17 +1,65 @@ - - + + + - Slideshow - - - + + + + Greenland + + - - + + + + + + + + + + + + + + + + + + + + + + +

Visit Greenland

+ + + + + + - + + + diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css index 63cedf2..61cd9c3 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,27 @@ /** Write your CSS in here **/ + + + + + +.img-fluid { + max-width: 100%; + height: auto; + min-width: 100%; + max-height: 30rem; +} + +p { + margin-left: 100px; +} + + + + + + + + + + +