diff --git a/week-1/Homework/extra/1-currency-conversion.js b/week-1/Homework/extra/1-currency-conversion.js index f96ea2e8a..6ac94c85d 100644 --- a/week-1/Homework/extra/1-currency-conversion.js +++ b/week-1/Homework/extra/1-currency-conversion.js @@ -5,10 +5,11 @@ Write a function that converts a price to USD (exchange rate is 1.4 $ to £) */ -function convertToUSD() {} +function convertToUSD(pricePound) { + return pricePound * 1.4; +} /* - CURRENCY FORMATTING =================== The business is now breaking into the Brazilian market Write a new function for converting to the Brazilian real (exchange rate is 5.7 BRL to £) @@ -16,7 +17,9 @@ function convertToUSD() {} Find a way to add 1% to all currency conversions (think about the DRY principle) */ -function convertToBRL() {} +function convertToBRL(pricePound) { + return (pricePound * 1.01) * 5.7; +} /* ======= TESTS - DO NOT MODIFY ===== */ diff --git a/week-1/Homework/extra/2-piping.js b/week-1/Homework/extra/2-piping.js index 5f5ea4e5b..35ccc290b 100644 --- a/week-1/Homework/extra/2-piping.js +++ b/week-1/Homework/extra/2-piping.js @@ -16,26 +16,33 @@ the final result to the variable goodCode */ -function add() { -} -function multiply() { +function add(a, b) { + const sum = Math.round((a + b) * 10) / 10; + return sum; +} +function multiply(a, b) { + return a * b; } -function format() { +function format(a) { + return "£" + a; } const startingValue = 2 // Why can this code be seen as bad practice? Comment your answer. -let badCode = +let badCode = format(multiply(add(startingValue, 10), 2)); /* BETTER PRACTICE */ -let goodCode = +addValue = add(startingValue, 10); +multiplyValue = multiply(addValue, 2); + +let goodCode = format(multiplyValue); /* ======= TESTS - DO NOT MODIFY ===== */ diff --git a/week-1/Homework/mandatory/1-syntax-errors.js b/week-1/Homework/mandatory/1-syntax-errors.js index b32f8a34c..f57574455 100644 --- a/week-1/Homework/mandatory/1-syntax-errors.js +++ b/week-1/Homework/mandatory/1-syntax-errors.js @@ -1,17 +1,19 @@ // There are syntax errors in this code - can you fix it to pass the tests? -function addNumbers(a b c) { +function addNumbers(a, b, c) { return a + b + c; } -function introduceMe(name, age) -return "Hello, my name is " + name "and I am " age + "years old"; +function introduceMe(name, age) { + return "Hello, my name is " + name + " and I am " + age + " years old"; +} function getRemainder(a, b) { - remainder = a %% b; + remainder = a % b; + // Use string interpolation here - return "The remainder is %{remainder}" + return `The remainder is ${remainder}`; } /* ======= TESTS - DO NOT MODIFY ===== */ diff --git a/week-1/Homework/mandatory/2-logic-error.js b/week-1/Homework/mandatory/2-logic-error.js index e040e106a..b4a962aee 100644 --- a/week-1/Homework/mandatory/2-logic-error.js +++ b/week-1/Homework/mandatory/2-logic-error.js @@ -1,16 +1,15 @@ // The syntax for this function is valid but it has an error, find it and fix it. function trimWord(word) { - return wordtrim(); + return word.trim(); } function getWordLength(word) { - return "word".length() + return word.length; } function multiply(a, b, c) { - a * b * c; - return; + return a * b * c; } /* ======= TESTS - DO NOT MODIFY ===== */ diff --git a/week-1/Homework/mandatory/3-function-output.js b/week-1/Homework/mandatory/3-function-output.js index a57e4aeca..bdc655662 100644 --- a/week-1/Homework/mandatory/3-function-output.js +++ b/week-1/Homework/mandatory/3-function-output.js @@ -1,9 +1,11 @@ // Add comments to explain what this function does. You're meant to use Google! +//Takes a random number between 0 (included) and 1 (excluded) and multiply it on 10 function getNumber() { return Math.random() * 10; } // Add comments to explain what this function does. You're meant to use Google! +//concatenates the string arguments to the calling string and returns a new string. function s(w1, w2) { return w1.concat(w2); } @@ -11,6 +13,7 @@ function s(w1, w2) { function concatenate(firstWord, secondWord, thirdWord) { // Write the body of this function to concatenate three words together // Look at the test case below to understand what to expect in return + return `${firstWord} ${secondWord} ${thirdWord}` } /* ======= TESTS - DO NOT MODIFY ===== */ diff --git a/week-1/Homework/mandatory/4-tax.js b/week-1/Homework/mandatory/4-tax.js index 8ddbddad3..0d4b03ecc 100644 --- a/week-1/Homework/mandatory/4-tax.js +++ b/week-1/Homework/mandatory/4-tax.js @@ -5,7 +5,9 @@ Sales tax is 20% of the price of the product */ -function calculateSalesTax() {} +function calculateSalesTax(amount) { + return amount * 1.2; +} /* CURRENCY FORMATTING @@ -17,7 +19,11 @@ function calculateSalesTax() {} Remember that the prices must include the sales tax (hint: you already wrote a function for this!) */ -function formatCurrency() {} +function formatCurrency(amount) { + const price = calculateSalesTax(amount); + return "£" + price.toFixed(2); +} + /* ======= TESTS - DO NOT MODIFY ===== */ diff --git a/week-1/Homework/mandatory/5-magic-8-ball.js b/week-1/Homework/mandatory/5-magic-8-ball.js index 688552429..eb346fc7c 100644 --- a/week-1/Homework/mandatory/5-magic-8-ball.js +++ b/week-1/Homework/mandatory/5-magic-8-ball.js @@ -45,7 +45,20 @@ Very doubtful. // This should log "The ball has shaken!" // and return the answer. -function shakeBall() {} +function shakeBall(question) { + console.log("The ball has shaken!"); + const array1 = ["It is certain.", "It is decidedly so.", + "Without a doubt.", "Yes - definitely.", "You may rely on it.", + "As I see it, yes.", "Most likely.", "Outlook good.", "Yes.", + "Signs point to yes.", "Reply hazy, try again.", "Ask again later.", + "Better not tell you now.", "Cannot predict now.", "Concentrate and ask again.", + "Don't count on it.", "My reply is no.", "My sources say no.", + "Outlook not so good.", "Very doubtful."]; + let answer = array1[Math.floor(Math.random() * array1.length)]; + return answer; +} + + // The answer should come from shaking the ball let answer; @@ -55,7 +68,25 @@ let answer; // - positive // - negative // - very negative -function checkAnswer() {} +function checkAnswer(answer) { + const arr1 = ["It is certain.", "It is decidedly so.", + "Without a doubt.", "Yes - definitely.", "You may rely on it."]; + const arr2 = ["As I see it, yes.", "Most likely.", "Outlook good.", "Yes.", + "Signs point to yes."]; + const arr3 = ["Reply hazy, try again.", "Ask again later.", + "Better not tell you now.", "Cannot predict now.", "Concentrate and ask again."]; + const arr4 = ["Don't count on it.", "My reply is no.", "My sources say no.", + "Outlook not so good.", "Very doubtful."]; + if (arr1.includes(answer)) { + return "very positive"; + } else if (arr2.includes(answer)) { + return "positive"; + } else if (arr3.includes(answer)) { + return "negative"; + } else if (arr4.includes(answer)) { + return "very negative"; + } +} /* ======= TESTS - DO NOT MODIFY ===== */ const log = console.log; diff --git a/week-2/.archive/mandatory/1-fix-functions.js b/week-2/.archive/mandatory/1-fix-functions.js index 6316fad54..9815c7b13 100644 --- a/week-2/.archive/mandatory/1-fix-functions.js +++ b/week-2/.archive/mandatory/1-fix-functions.js @@ -2,7 +2,7 @@ // Look at the tests and see how you can fix them. function mood() { - let isHappy = true; + let isHappy = false; if (isHappy) { return "I am happy"; @@ -13,7 +13,7 @@ function mood() { function greaterThan10() { let num = 10; - let isBigEnough; + let isBigEnough = num >= 10; if (isBigEnough) { return "num is greater than or equal to 10"; @@ -24,21 +24,21 @@ function greaterThan10() { function sortArray() { let letters = ["a", "n", "c", "e", "z", "f"]; - let sortedLetters; + let sortedLetters = letters.sort(); return sortedLetters; } function first5() { let numbers = [1, 2, 3, 4, 5, 6, 7, 8]; - let sliced; + let sliced = numbers.slice(0, 5); return sliced; } function get3rdIndex(arr) { let index = 3; - let element; + let element = arr[index]; return element; } diff --git a/week-2/.archive/mandatory/2-function-creation.js b/week-2/.archive/mandatory/2-function-creation.js index bf7ecfde8..aa9523538 100644 --- a/week-2/.archive/mandatory/2-function-creation.js +++ b/week-2/.archive/mandatory/2-function-creation.js @@ -5,7 +5,12 @@ Write a function that: - removes any forward slashes (/) in the strings - makes the string all lowercase */ -function tidyUpString(strArr) {} + +function tidyUpString(strArr) { + return newTidyStr = strArr.map(function (el) { + return el.trim().replace("/", "").toLowerCase(); + }); +} /* Complete the function to check if the variable `num` satisfies the following requirements: @@ -15,7 +20,12 @@ Complete the function to check if the variable `num` satisfies the following req Tip: use logical operators */ -function validate(num) {} +function validate(num) { + if (typeof num === "number" && num % 2 === 0 && num <= 100) { + return true; + } + return false; +} /* Write a function that removes an element from an array @@ -26,8 +36,10 @@ The function must: */ function remove(arr, index) { - return; // complete this statement + arr.splice(index, 1); + return arr; } +//return; // complete this statement /* Write a function that: @@ -38,7 +50,12 @@ Write a function that: */ function formatPercentage(arr) { - + for (let i = 0; i < arr.length; i++) { + arr[i] = arr[i].toPrecision(2); + if (arr[i] > 100) arr[i] = 100; + arr[i] = arr[i] + "%"; + } + return arr; } /* ======= TESTS - DO NOT MODIFY ===== */ @@ -72,7 +89,7 @@ test( "daniel", "irina", "gordon", - "ashleigh" + "ashleigh", ]) ); test( @@ -101,7 +118,7 @@ test( "c", "d", "e", - "f" + "f", ]) ); @@ -111,6 +128,6 @@ test( "23%", "18%", "100%", - "0.37%" + "0.37%", ]) -); \ No newline at end of file +); diff --git a/week-2/.archive/mandatory/3-playing-computer.js b/week-2/.archive/mandatory/3-playing-computer.js index 0fa7c043f..14b284fac 100644 --- a/week-2/.archive/mandatory/3-playing-computer.js +++ b/week-2/.archive/mandatory/3-playing-computer.js @@ -28,7 +28,7 @@ const f2 = function(a, b) { console.log(x); console.log(a); -console.log(b); +//console.log(b); for (let i = 0; i < 5; ++i) { a = a + 1; diff --git a/week-2/.archive/mandatory/4-sorting-algorithm.js b/week-2/.archive/mandatory/4-sorting-algorithm.js index ec5d4208b..ddb233c2f 100644 --- a/week-2/.archive/mandatory/4-sorting-algorithm.js +++ b/week-2/.archive/mandatory/4-sorting-algorithm.js @@ -14,7 +14,19 @@ You don't have to worry about making this algorithm work fast! The idea is to ge "think" like a computer and practice your knowledge of basic JavaScript. */ -function sortAges(arr) {} +function sortAges(arr) { + var len = arr.length; + for (var i = len - 1; i >= 0; i--) { + for (var j = 1; j <= i; j++) { + if (arr[j - 1] > arr[j]) { + var temp = arr[j - 1]; + arr[j - 1] = arr[j]; + arr[j] = temp; + } + } + } + return arr; +} /* ======= TESTS - DO NOT MODIFY ===== */ diff --git a/week-4/InClass/E-arrays-of-objects/exercise-2.js b/week-4/InClass/E-arrays-of-objects/exercise-2.js index 43a66a6b0..601053d0d 100644 --- a/week-4/InClass/E-arrays-of-objects/exercise-2.js +++ b/week-4/InClass/E-arrays-of-objects/exercise-2.js @@ -47,10 +47,31 @@ let travelDestinations = [ // ["Dublin", "Paris", "Edinburgh"] +<<<<<<< Updated upstream // 1. Print in the console // 2. all the destination names // 3. more than 300 kms far away and reachable by train. +======= +let destinationNameReachableByFerry = travelDestinations + .filter((destination) => destination.transportations.includes("ferry")) + .map((destination) => destination.destinationName); +// Complete here + +function byTrain300km(destination) { + return ( + destination.distanceKms > 300 && + destination.transportations.includes("train") + ); +} + +let destinationNamesMoreThan300KmsAwayByTrain = travelDestinations + .forEach(byTrain300km(destination)); +// Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH) +<<<<<<< Updated upstream +>>>>>>> Stashed changes +======= +>>>>>>> Stashed changes function isReachable(destination) { let isFar = destination.distanceKms > 300; diff --git a/week-5/Homework/mandatory/1-exercises/exercises.js b/week-5/Homework/mandatory/1-exercises/exercises.js index 09ed09252..45f964112 100644 --- a/week-5/Homework/mandatory/1-exercises/exercises.js +++ b/week-5/Homework/mandatory/1-exercises/exercises.js @@ -13,8 +13,17 @@ * ..... * */ +let content = document.querySelector("#content"); + function exerciseOne(arrayOfPeople) { - let content = document.querySelector("#content"); + arrayOfPeople.forEach((person) => { + let h1 = document.createElement("h1"); + h1.innerText = person.name; + content.appendChild(h1); + let h2 = document.createElement("h2"); + h2.innerText = person.job; + content.appendChild(h2); + }); } /** @@ -24,7 +33,15 @@ function exerciseOne(arrayOfPeople) { * All of your HTML should go inside the Div tag with the id "content". * */ +let ul = document.createElement("ul"); +content.appendChild(ul); + function exerciseTwo(shoppingItems) { + shoppingItems.forEach((item) => { + let li = document.createElement("li"); + li.innerText = item; + ul.appendChild(li); + }); //Write your code in here } @@ -60,7 +77,29 @@ function exerciseTwo(shoppingItems) { The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ **/ + +let ul2 = document.createElement("ul"); +ul2.style.listStyleType = "none"; +ul2.style.display = "flex"; +ul2.style.justifyContent = "space-between"; +content.appendChild(ul2); + function exerciseThree(books) { + books.forEach((book) => { + let li = document.createElement("li"); + ul2.appendChild(li); + let p = document.createElement("p"); + p.innerText = `${book.title} - ${book.author}`; + li.appendChild(p); + let img = document.createElement("img"); + img.src = book.coverImageUrl; + li.appendChild(img); + if (book.alreadyRead === true) { + return (li.style.backgroundColor = "green"); + } else { + return (li.style.backgroundColor = "red"); + } + }); //Write your code in here } diff --git a/week-5/Homework/mandatory/2-project/js/main.js b/week-5/Homework/mandatory/2-project/js/main.js index e69de29bb..60179672c 100644 --- a/week-5/Homework/mandatory/2-project/js/main.js +++ b/week-5/Homework/mandatory/2-project/js/main.js @@ -0,0 +1,83 @@ +// blue btn +let blueStyle = document.querySelector("#blueBtn"); +blueStyle.addEventListener("click", changeStyleBlue); + +function changeStyleBlue() { + let newBackground = document.querySelector(".jumbotron"); + newBackground.style.backgroundColor = `#588fbd`; + let newDonateBtn = document.querySelector(".buttons .btn-primary"); + newDonateBtn.style.backgroundColor = `#ffa500`; + let newVolBtn = document.querySelector(".buttons .btn-secondary"); + newVolBtn.style.backgroundColor = "black"; + newVolBtn.style.color = "white"; +} + +// orange btn +let orangeStyle = document.querySelector("#orangeBtn"); +orangeStyle.addEventListener("click", changeStyleOrange); + +function changeStyleOrange() { + document.querySelector(".jumbotron").style.backgroundColor = `#f0ad4e`; + document.querySelector( + ".buttons .btn-primary" + ).style.backgroundColor = `#5751fd`; + document.querySelector( + ".buttons .btn-secondary" + ).style.backgroundColor = `#31b0d5`; + document.querySelector(".buttons .btn-secondary").style.color = `white`; +} + +// green btn +let greenStyle = document.querySelector("#greenBtn"); +greenStyle.addEventListener("click", changeStyleGreen); + +function changeStyleGreen() { + document.querySelector(".jumbotron").style.backgroundColor = `#87ca8a`; + document.querySelector( + ".buttons .btn-primary" + ).style.backgroundColor = `black`; + document.querySelector( + ".buttons .btn-secondary" + ).style.backgroundColor = `#8c9c08`; +} + +//part 2 +let submit = document.querySelector("form button"); +submit.addEventListener("click", submitting); + +function submitting() { + let email = document.querySelector("#exampleInputEmail1"); + let name = document.querySelector("#example-text-input"); + let describeField = document.querySelector("#exampleTextarea"); + if (email.value.length === 0 || !email.value.includes("@")) { + email.style.borderColor = "red"; + } else { + email.style.borderColor = "black"; + } + + if (name.value.length === 0) { + name.style.borderColor = "red"; + } else { + name.style.borderColor = "black"; + } + + if (describeField.value.length === 0) { + describeField.style.borderColor = "red"; + } else { + describeField.style.borderColor = "black"; + } + + if ( + name.value.length > 0 && + email.value.length > 0 && + email.value.includes("@") && + describeField.value.length > 0 + ) { + alert("Thank you for filling out the form"); + email.value = ""; + name.value = ""; + describeField.value = ""; + } + + event.preventDefault(); +} diff --git a/week-5/InClass/A-dom-manipulation/exercise.js b/week-5/InClass/A-dom-manipulation/exercise.js index 717fb16f5..0dd711d97 100644 --- a/week-5/InClass/A-dom-manipulation/exercise.js +++ b/week-5/InClass/A-dom-manipulation/exercise.js @@ -15,6 +15,14 @@ Write JavaScript below that logs: --> should log a list of nodes with a length of 3 */ +let task1 = document.querySelectorAll("p"); +console.log(task1); +let task2 = document.querySelector("div"); +console.log(task2); +let task3 = document.querySelector("#jumbotron-text"); +console.log(task3); +let task4 = document.querySelectorAll(".primary-content p"); +console.log(task4); /* Task 2 @@ -22,6 +30,12 @@ Task 2 When a user clicks the 'ALERT' button, an alert box should pop up with the text "Thanks for visiting Bikes for Refugees!" */ +let alertText = document.querySelector("#alertBtn"); +alertText.addEventListener("click", showAlert); + +function showAlert() { + alert("Thanks for visiting Bikes for Refugees!"); +} /* Task 3 @@ -30,6 +44,14 @@ Task 3 Write JavaScript below that changes the background colour of the page when the 'Change colour' button is clicked. */ +let newColor = document.querySelector("#bgrChangeBtn"); +newColor.addEventListener("click", changeColor); + +function changeColor() { + let newBackGr = document.querySelector("body"); + newBackGr.style.backgroundColor = "yellow"; +} + /* Task 4 ====== @@ -37,12 +59,30 @@ Task 4 When a user clicks the 'Add some text' button, a new paragraph should be added below the buttons that says "Read more below." */ + +let newPar = document.querySelector("#addTextBtn"); +newPar.addEventListener("click", addPar); + +function addPar() { + let par = document.createElement("p"); + par.innerText = "Read more below."; + let newDiv = document.querySelector(".buttons"); + newDiv.appendChild(par); +} + /* Task 5 ====== When the 'Larger links!' button is clicked, the text of all links on the page should increase. */ +let largeLink = document.querySelector("#largerLinksBtn"); +largeLink.addEventListener("click", makeLarge); + +function makeLarge() { + let links = document.querySelectorAll("a"); + links.forEach((link) => (link.style.fontSize = "1.5em")); +} /* Task 6 @@ -51,3 +91,16 @@ Task 6 Using JavaScript, create an unordered list under the "Add" button. When the "Add" button is pressed, get the value of the text box on its left, and add it to the list you created above. */ + + +let ul = document.createElement("ul"); // ul also accepts display flex from parent div... how to change? +const inputDiv = document.querySelectorAll(".primary-content div")[3]; +inputDiv.appendChild(ul); +let addText = document.querySelector("#addArticleBtn"); +addText.addEventListener("click", addList); + +function addList() { + let li = document.createElement("li"); + li.innerText = document.querySelector("input").value; + ul.appendChild(li); +} diff --git a/week-5/InClass/A-dom-manipulation/index.html b/week-5/InClass/A-dom-manipulation/index.html index 85cee1362..d92748eda 100644 --- a/week-5/InClass/A-dom-manipulation/index.html +++ b/week-5/InClass/A-dom-manipulation/index.html @@ -11,6 +11,7 @@ + Skip to main content @@ -124,7 +125,7 @@

Upcoming events

- + diff --git a/week-5/InClass/A-dom-manipulation/styles/style.css b/week-5/InClass/A-dom-manipulation/styles/style.css index 496854463..fd57b84cb 100644 --- a/week-5/InClass/A-dom-manipulation/styles/style.css +++ b/week-5/InClass/A-dom-manipulation/styles/style.css @@ -156,4 +156,4 @@ body { .navbar-brand > img { max-height: 80px; } -} \ No newline at end of file +} diff --git a/week-6/Homework/extra/2-slideshow/index.html b/week-6/Homework/extra/2-slideshow/index.html index 39cd40e68..62dd367a8 100644 --- a/week-6/Homework/extra/2-slideshow/index.html +++ b/week-6/Homework/extra/2-slideshow/index.html @@ -1,17 +1,28 @@ - - Slideshow - - - - - - - - + + + Slideshow + + + + + + +
+ +
+
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/week-6/Homework/extra/2-slideshow/slideshow.js b/week-6/Homework/extra/2-slideshow/slideshow.js index b55091c7b..408fa9a05 100644 --- a/week-6/Homework/extra/2-slideshow/slideshow.js +++ b/week-6/Homework/extra/2-slideshow/slideshow.js @@ -1 +1,61 @@ // Write your code here +const images = [ + { + src: + "https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", + }, + { + src: + "https://images.unsplash.com/photo-1520387294843-fd994fd872e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80", + }, + { + src: + "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=841&q=80", + }, +]; + +let img = document.querySelector("img"); +let forBtn = document.querySelector("#forward"); +forBtn.addEventListener("click", slideForward); +let backBtn = document.querySelector("#back"); +backBtn.addEventListener("click", slideBack); +let autoForwardBtn = document.querySelector("#autoForward"); +autoForwardBtn.addEventListener("click", autoSlideForward); +let autoBackBtn = document.querySelector("#autoBack"); +autoBackBtn.addEventListener("click", autoSlideBack); +let stopBtn = document.querySelector("#stop"); +stopBtn.addEventListener("click", stopAutoPlay) +let counter = 0; +let interval; + +function slideForward() { + img.src = images[counter % images.length].src; + counter++; + console.log(counter % images.length); +} + +function slideBack() { + img.src = images[counter % images.length].src; + if (counter === 0) { + counter = images.length - 1; + } else { + counter--; + } + console.log(counter % images.length); +} + +function autoSlideForward() { + interval = setInterval(function() { + slideForward() + }, 1000) +} + +function autoSlideBack() { + interval = setInterval(function() { + slideBack(); + }, 1000) +} + +function stopAutoPlay() { + clearInterval(interval); +} \ No newline at end of file diff --git a/week-6/Homework/extra/2-slideshow/style.css b/week-6/Homework/extra/2-slideshow/style.css index 63cedf2d2..5abc9c829 100644 --- a/week-6/Homework/extra/2-slideshow/style.css +++ b/week-6/Homework/extra/2-slideshow/style.css @@ -1 +1,5 @@ /** Write your CSS in here **/ +img { + height: 350px; + width: 500px; +} diff --git a/week-6/Homework/mandatory/1-alarmclock/alarmclock.js b/week-6/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd3b..bfaf76287 100644 --- a/week-6/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/week-6/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,8 +1,30 @@ -function setAlarm() {} +function displayTime(time, timeRem) { + let s = "0"; + if (time > 9){ + s = "" + } + timeRem.innerText = `Time Remaining: 00:${s}${time}`; +} + +function setAlarm() { + let time = document.querySelector("#alarmSet").value; + document.querySelector("#alarmSet").value = ""; + let timeRem = document.querySelector("#timeRemaining"); + displayTime(time, timeRem); + let interval = setInterval(function(){ + time--; + displayTime(time, timeRem); + if(time === 0) { + playAlarm(); + clearInterval(interval); + } + }, 1000); +} // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); +audio.volume = 0.1; function setup() { document.getElementById("set").addEventListener("click", () => { diff --git a/week-6/Homework/mandatory/2-quotegenerator/index.html b/week-6/Homework/mandatory/2-quotegenerator/index.html index b6115be49..7a9e8b651 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/index.html +++ b/week-6/Homework/mandatory/2-quotegenerator/index.html @@ -1,17 +1,24 @@ - - Quote Generator - - - - - - - - + + + Quote Generator + + + + + + +
+
+ + + +
+ + + + + + \ No newline at end of file diff --git a/week-6/Homework/mandatory/2-quotegenerator/quotes.js b/week-6/Homework/mandatory/2-quotegenerator/quotes.js index 39ab24529..e5fb4d308 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/quotes.js +++ b/week-6/Homework/mandatory/2-quotegenerator/quotes.js @@ -490,3 +490,52 @@ const quotes = [ author: "Zig Ziglar", }, ]; + +let phrase = document.createElement("h1"); +let text = pickFromArray(quotes); +phrase.innerText = text.quote; +let main = document.querySelector("#main"); +main.appendChild(phrase); +let author = document.createElement("h2"); +author.innerText = text.author; +main.appendChild(author); + +//another quote btn +let click = document.querySelector("#change"); +click.addEventListener("click", newPhrase); + +function newPhrase() { + text = pickFromArray(quotes); + phrase.innerText = text.quote; + author.innerText = text.author; +} + +//auto play checkbox +let autoPlay = document.querySelector("#checkbox"); +autoPlay.addEventListener("CheckboxStateChange", autoPlayOn); + +let counter = 0; +let interval; +let checkbox = document.querySelector("#checkbox"); +let label = document.querySelector("label"); + +function autoPlayOn() { + if (checkbox.checked) { + label.innerText = "autoplay:ON"; + interval = setInterval( + function () { + newPhrase(); + counter++; + if (counter >= quotes.length) { + counter = 0; + } + }, + 5000, + quotes + ); + } else { + label.innerText = "autoplay:OFF"; + clearInterval(interval); + } +} + diff --git a/week-6/Homework/mandatory/2-quotegenerator/style.css b/week-6/Homework/mandatory/2-quotegenerator/style.css index 63cedf2d2..3900ae95a 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/style.css +++ b/week-6/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,15 @@ /** Write your CSS in here **/ +body { + padding: 150px; +} + +h1 { + color: green; + font-style: italic; +} + +#secondary { + position: fixed; + bottom: 20px; + right: 30px; +} diff --git a/week-6/Homework/mandatory/3-DOM-practice/main.js b/week-6/Homework/mandatory/3-DOM-practice/main.js index be9f60960..8891c92d3 100644 --- a/week-6/Homework/mandatory/3-DOM-practice/main.js +++ b/week-6/Homework/mandatory/3-DOM-practice/main.js @@ -1,13 +1,11 @@ -console.log("Testing JS file loaded!") +console.log("Testing JS file loaded!"); // Task 1 // Without changing any of the HTML or CSS, update the
tags so that they have white backgrounds. - - - - +let sections = document.querySelectorAll("section"); +sections.forEach((section) => (section.style.backgroundColor = "white")); // Task 2 @@ -16,8 +14,8 @@ console.log("Testing JS file loaded!") // Hint: look at the CSS to see if there are any classes already written which you can use. - - +let images = document.querySelectorAll("img"); +images.forEach((image) => image.classList.add("content-title")); // Task 3 diff --git a/week-6/InClass/2-Callbacks/exercise-1/exercise.js b/week-6/InClass/2-Callbacks/exercise-1/exercise.js index 02fc93607..0f0d2160b 100644 --- a/week-6/InClass/2-Callbacks/exercise-1/exercise.js +++ b/week-6/InClass/2-Callbacks/exercise-1/exercise.js @@ -9,4 +9,19 @@ Task 2 Update your code to make the colour change every 5 seconds to something different. Hint: try searching for setInterval. ================ -*/ \ No newline at end of file +*/ +// setTimeout(function() { +// document.body.style.backgroundColor = "yellow" +// }, 5000) + + +let colors = ["yellow", "green", "blue","red"]; +let counter = 0; + +setInterval(function(colors) { + document.body.style.backgroundColor = colors[counter]; + counter++; + if (counter >= colors.length) { + counter = 0; + } +}, 1000, colors); diff --git a/week-6/InClass/2-Callbacks/exercise-2/exercise.js b/week-6/InClass/2-Callbacks/exercise-2/exercise.js index c1596fa1f..2bc0ca78a 100644 --- a/week-6/InClass/2-Callbacks/exercise-2/exercise.js +++ b/week-6/InClass/2-Callbacks/exercise-2/exercise.js @@ -42,6 +42,14 @@ function addMovie() { const loadingText = document.querySelector("#loading-text"); const movieTitleInput = document.querySelector("#new-movie-input"); const movieTitle = movieTitleInput.value; + movieTitleInput.value = ""; + loadingText.className = "show"; + setTimeout(function () { + let movie = { title: movieTitle, haveWatched: false }; + movies.push(movie); + reloadMovieList(); + loadingText.className = "hide"; + }, 4000); // Your task - write the code in this function: // 1. The moment this function is called: