From 34bd935655cb5c699b0daa4b841f8f523bcc1cc4 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Mon, 27 Apr 2020 00:52:17 +0100 Subject: [PATCH 01/22] js syntax-errors --- week-1/Homework/mandatory/1-syntax-errors.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) 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 ===== */ From ff6d181f06490c1caa4026bef117f9ed4d9a92bf Mon Sep 17 00:00:00 2001 From: mara-ber Date: Thu, 30 Apr 2020 19:58:29 +0100 Subject: [PATCH 02/22] js 2-logic-error --- week-1/Homework/mandatory/2-logic-error.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 ===== */ From a9e6e53fc8f5a512c23784782701171b5ff1ed9f Mon Sep 17 00:00:00 2001 From: mara-ber Date: Thu, 30 Apr 2020 19:59:43 +0100 Subject: [PATCH 03/22] js 3-function-output --- week-1/Homework/mandatory/3-function-output.js | 3 +++ 1 file changed, 3 insertions(+) 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 ===== */ From 5315f50700ba16941718bdc5882d17450adb77e7 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Thu, 30 Apr 2020 20:00:18 +0100 Subject: [PATCH 04/22] js 4-tax --- week-1/Homework/mandatory/4-tax.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 ===== */ From 088f8b029f542a476ba64cf97e74fb8010a9fba7 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Thu, 30 Apr 2020 20:01:34 +0100 Subject: [PATCH 05/22] js 5-magic-8-ball --- week-1/Homework/mandatory/5-magic-8-ball.js | 35 +++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) 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; From 04e479a4b41a1af0c386f7cbdcf41e9cda70cffc Mon Sep 17 00:00:00 2001 From: mara-ber Date: Thu, 30 Apr 2020 20:03:26 +0100 Subject: [PATCH 06/22] js-extra 1-currency-conversion --- week-1/Homework/extra/1-currency-conversion.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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 ===== */ From 18476ec421565ca3707858f0e532278039c3e2a3 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Sun, 3 May 2020 13:40:44 +0100 Subject: [PATCH 07/22] week-2-1-fix-functions --- week-2/Homework/mandatory/1-fix-functions.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/week-2/Homework/mandatory/1-fix-functions.js b/week-2/Homework/mandatory/1-fix-functions.js index 6316fad54..9815c7b13 100644 --- a/week-2/Homework/mandatory/1-fix-functions.js +++ b/week-2/Homework/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; } From b19f2f74d946f5fa8f2574a726109a8fb40c3468 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Sun, 3 May 2020 21:32:00 +0100 Subject: [PATCH 08/22] js-extra 2-piping.js --- week-1/Homework/extra/2-piping.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) 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 ===== */ From b81a28eeed1023c94ac3f28335c78d81bb545344 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Thu, 14 May 2020 20:55:08 +0100 Subject: [PATCH 09/22] week2-man/2 --- .../Homework/mandatory/2-function-creation.js | 33 ++++++++++++++----- .../Homework/mandatory/3-playing-computer.js | 2 +- .../Homework/mandatory/4-sorting-algorithm.js | 14 +++++++- 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/week-2/Homework/mandatory/2-function-creation.js b/week-2/Homework/mandatory/2-function-creation.js index bf7ecfde8..aa9523538 100644 --- a/week-2/Homework/mandatory/2-function-creation.js +++ b/week-2/Homework/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/Homework/mandatory/3-playing-computer.js b/week-2/Homework/mandatory/3-playing-computer.js index 0fa7c043f..14b284fac 100644 --- a/week-2/Homework/mandatory/3-playing-computer.js +++ b/week-2/Homework/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/Homework/mandatory/4-sorting-algorithm.js b/week-2/Homework/mandatory/4-sorting-algorithm.js index ec5d4208b..ddb233c2f 100644 --- a/week-2/Homework/mandatory/4-sorting-algorithm.js +++ b/week-2/Homework/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 ===== */ From 6df8c05f546626f30cf5a50602fd2fb0de568eb6 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Sat, 13 Jun 2020 12:07:08 +0100 Subject: [PATCH 10/22] not finnished week5 --- .../InClass/E-arrays-of-objects/exercise-2.js | 21 +++++++ .../mandatory/1-exercises/exercises.js | 15 +++++ week-5/InClass/A-dom-manipulation/exercise.js | 60 +++++++++++++++++++ week-5/InClass/A-dom-manipulation/index.html | 5 +- .../A-dom-manipulation/styles/style.css | 2 +- 5 files changed, 100 insertions(+), 3 deletions(-) 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 665491667..1ee43c9bb 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..9ddbb4648 100644 --- a/week-5/Homework/mandatory/1-exercises/exercises.js +++ b/week-5/Homework/mandatory/1-exercises/exercises.js @@ -13,8 +13,23 @@ * ..... * */ +// function getName(person) { +// return person.name; +// } +// function getJob(person) { +// return person.job; +// } + function exerciseOne(arrayOfPeople) { let content = document.querySelector("#content"); + for (i = 0; i < arrayOfPeople.length; i++) { + let h1 = document.createElement("h1"); + h1.innerText = i[name]; + content.appendChild(h1); + let h2 = document.createElement("h2"); + h2.innerText = i.job; + content.appendChild(h2); + } } /** diff --git a/week-5/InClass/A-dom-manipulation/exercise.js b/week-5/InClass/A-dom-manipulation/exercise.js index 717fb16f5..9100f2f99 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,7 +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,12 +43,28 @@ 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 ====== 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 @@ -43,6 +72,13 @@ 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 +87,27 @@ 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 list = document.createElement("ul"); +let newField = document.querySelector('.primary-content'); +newField.appendChild(list); +//let list = document.createElement('ul'); + +let newEl = document.createElement("li"); +newEl.innerText = "something here"; +let myList = document.querySelector("ul"); +myList.appendChild(newEl); +console.log(myList); + +// let addInfo = document.querySelector('#addArticleBtn'); +// addInfo.addEventListener('click',addText); + +// function addText() { +// //let text = document.querySelector('input'); +// let newEl = document.createElement('li'); +// newEl.innerText = "something here"; +// console.log(newEl); +// let myList = document.querySelector('ul'); +// console.log(myList); +// myList.appendChild(newEl); +// } diff --git a/week-5/InClass/A-dom-manipulation/index.html b/week-5/InClass/A-dom-manipulation/index.html index 85cee1362..96de1d59b 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 @@ -64,7 +65,7 @@

Bikes for Refugees

Larger links! -
+
@@ -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 +} From 78affe79788dc726ec4b7f700cb5a8203fdb646c Mon Sep 17 00:00:00 2001 From: mara-ber Date: Mon, 15 Jun 2020 14:29:35 +0100 Subject: [PATCH 11/22] week5, unsolved issues with style, + week6 ex1 task1 inClass --- .../mandatory/1-exercises/exercises.js | 46 ++++++++++++++----- week-5/InClass/A-dom-manipulation/exercise.js | 35 +++++--------- week-5/InClass/A-dom-manipulation/index.html | 2 +- .../2-Callbacks/exercise-1/exercise.js | 8 +++- 4 files changed, 55 insertions(+), 36 deletions(-) diff --git a/week-5/Homework/mandatory/1-exercises/exercises.js b/week-5/Homework/mandatory/1-exercises/exercises.js index 9ddbb4648..1b1c04994 100644 --- a/week-5/Homework/mandatory/1-exercises/exercises.js +++ b/week-5/Homework/mandatory/1-exercises/exercises.js @@ -13,23 +13,17 @@ * ..... *
*/ -// function getName(person) { -// return person.name; -// } -// function getJob(person) { -// return person.job; -// } +let content = document.querySelector("#content"); function exerciseOne(arrayOfPeople) { - let content = document.querySelector("#content"); - for (i = 0; i < arrayOfPeople.length; i++) { + arrayOfPeople.forEach((person) => { let h1 = document.createElement("h1"); - h1.innerText = i[name]; + h1.innerText = person.name; content.appendChild(h1); let h2 = document.createElement("h2"); - h2.innerText = i.job; + h2.innerText = person.job; content.appendChild(h2); - } + }); } /** @@ -39,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 } @@ -75,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"); //creates dots - how to delete them? +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/InClass/A-dom-manipulation/exercise.js b/week-5/InClass/A-dom-manipulation/exercise.js index 9100f2f99..550f2f6fc 100644 --- a/week-5/InClass/A-dom-manipulation/exercise.js +++ b/week-5/InClass/A-dom-manipulation/exercise.js @@ -88,26 +88,15 @@ 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 list = document.createElement("ul"); -let newField = document.querySelector('.primary-content'); -newField.appendChild(list); -//let list = document.createElement('ul'); - -let newEl = document.createElement("li"); -newEl.innerText = "something here"; -let myList = document.querySelector("ul"); -myList.appendChild(newEl); -console.log(myList); - -// let addInfo = document.querySelector('#addArticleBtn'); -// addInfo.addEventListener('click',addText); - -// function addText() { -// //let text = document.querySelector('input'); -// let newEl = document.createElement('li'); -// newEl.innerText = "something here"; -// console.log(newEl); -// let myList = document.querySelector('ul'); -// console.log(myList); -// myList.appendChild(newEl); -// } + +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 96de1d59b..d92748eda 100644 --- a/week-5/InClass/A-dom-manipulation/index.html +++ b/week-5/InClass/A-dom-manipulation/index.html @@ -65,7 +65,7 @@

Bikes for Refugees

Larger links! -
+
diff --git a/week-6/InClass/2-Callbacks/exercise-1/exercise.js b/week-6/InClass/2-Callbacks/exercise-1/exercise.js index 02fc93607..0cd4d93ef 100644 --- a/week-6/InClass/2-Callbacks/exercise-1/exercise.js +++ b/week-6/InClass/2-Callbacks/exercise-1/exercise.js @@ -9,4 +9,10 @@ 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.background = "yellow" +}, 5000) + +// task2 ---? \ No newline at end of file From 58f92f771eebb2f5f674f02805d41d5befaafe68 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Mon, 15 Jun 2020 23:20:02 +0100 Subject: [PATCH 12/22] week5 inClass + ex1 homework --- .../mandatory/1-exercises/exercises.js | 2 +- week-5/InClass/A-dom-manipulation/exercise.js | 20 +++++++++++-------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/week-5/Homework/mandatory/1-exercises/exercises.js b/week-5/Homework/mandatory/1-exercises/exercises.js index 1b1c04994..4e770aeaa 100644 --- a/week-5/Homework/mandatory/1-exercises/exercises.js +++ b/week-5/Homework/mandatory/1-exercises/exercises.js @@ -79,7 +79,7 @@ function exerciseTwo(shoppingItems) { **/ -let ul2 = document.createElement("ul"); //creates dots - how to delete them? +let ul2 = document.createElement("ul"); //creates dots - how to delete them? div? ul2.style.display = "flex"; ul2.style.justifyContent = "space-between"; content.appendChild(ul2); diff --git a/week-5/InClass/A-dom-manipulation/exercise.js b/week-5/InClass/A-dom-manipulation/exercise.js index 550f2f6fc..0dd711d97 100644 --- a/week-5/InClass/A-dom-manipulation/exercise.js +++ b/week-5/InClass/A-dom-manipulation/exercise.js @@ -15,14 +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); +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 @@ -36,6 +36,7 @@ alertText.addEventListener("click", showAlert); function showAlert() { alert("Thanks for visiting Bikes for Refugees!"); } + /* Task 3 ======= @@ -50,12 +51,15 @@ function changeColor() { let newBackGr = document.querySelector("body"); newBackGr.style.backgroundColor = "yellow"; } + /* 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); From 553634a5b405b905b09f90ccd4e0ac6a9814b5dd Mon Sep 17 00:00:00 2001 From: mara-ber Date: Tue, 16 Jun 2020 18:09:26 +0100 Subject: [PATCH 13/22] week5 homework 1-ex --- week-5/Homework/mandatory/1-exercises/exercises.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/week-5/Homework/mandatory/1-exercises/exercises.js b/week-5/Homework/mandatory/1-exercises/exercises.js index 4e770aeaa..45f964112 100644 --- a/week-5/Homework/mandatory/1-exercises/exercises.js +++ b/week-5/Homework/mandatory/1-exercises/exercises.js @@ -78,26 +78,26 @@ 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"); //creates dots - how to delete them? div? +let ul2 = document.createElement("ul"); +ul2.style.listStyleType = "none"; ul2.style.display = "flex"; -ul2.style.justifyContent = "space-between"; +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") + 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"; + return (li.style.backgroundColor = "green"); } else { - return li.style.backgroundColor = "red"; + return (li.style.backgroundColor = "red"); } }); //Write your code in here From 58238e13a60645ccc398d4f37adb44f8719f199c Mon Sep 17 00:00:00 2001 From: mara-ber Date: Tue, 16 Jun 2020 18:12:03 +0100 Subject: [PATCH 14/22] week5 the first part of the progect --- .../Homework/mandatory/2-project/js/main.js | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/week-5/Homework/mandatory/2-project/js/main.js b/week-5/Homework/mandatory/2-project/js/main.js index e69de29bb..f50676c3b 100644 --- a/week-5/Homework/mandatory/2-project/js/main.js +++ b/week-5/Homework/mandatory/2-project/js/main.js @@ -0,0 +1,31 @@ +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 a.btn-primary"); + newDonateBtn.style.backgroundColor = `#ffa500`; + let newVolBtn = document.querySelector(".buttons a.btn-secondary"); + newVolBtn.style.backgroundColor = "black"; + newVolBtn.style.color = "white"; +} + +let orangeStyle = document.querySelector("#orangeBtn"); +orangeStyle.addEventListener("click", changeStyleOrange); + +function changeStyleOrange() { + document.querySelector(".jumbotron").style.backgroundColor = `#f0ad4e`; + document.querySelector(".buttons a.btn-primary").style.backgroundColor = `#5751fd`; + document.querySelector(".buttons a.btn-secondary").style.backgroundColor = `#31b0d5`; + document.querySelector(".buttons a.btn-secondary").style.color = `white`; +} + +let greenStyle = document.querySelector("#greenBtn"); +greenStyle.addEventListener("click", changeStyleGreen); + +function changeStyleGreen() { + document.querySelector(".jumbotron").style.backgroundColor = `#87ca8a`; + document.querySelector(".buttons a.btn-primary").style.backgroundColor = `black`; + document.querySelector(".buttons a.btn-secondary").style.backgroundColor = `#8c9c08`; +} \ No newline at end of file From 81ca849f83d790a3c413490d9c319b3322a66b0e Mon Sep 17 00:00:00 2001 From: mara-ber Date: Tue, 16 Jun 2020 18:14:30 +0100 Subject: [PATCH 15/22] week6 inClass callbacks --- week-6/InClass/2-Callbacks/exercise-1/exercise.js | 15 ++++++++++++--- week-6/InClass/2-Callbacks/exercise-2/exercise.js | 8 ++++++++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/week-6/InClass/2-Callbacks/exercise-1/exercise.js b/week-6/InClass/2-Callbacks/exercise-1/exercise.js index 0cd4d93ef..577e21aaa 100644 --- a/week-6/InClass/2-Callbacks/exercise-1/exercise.js +++ b/week-6/InClass/2-Callbacks/exercise-1/exercise.js @@ -10,9 +10,18 @@ Update your code to make the colour change every 5 seconds to something differen ================ */ - setTimeout(function() { - document.body.style.background = "yellow" + document.body.style.backgroundColor = "yellow" }, 5000) -// task2 ---? \ No newline at end of file + +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); \ No newline at end of file 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: From 6bc8390e5d2d110e951c2bebf33b64122d3a07d1 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Tue, 16 Jun 2020 18:15:14 +0100 Subject: [PATCH 16/22] week6 alarmclock --- .../mandatory/1-alarmclock/alarmclock.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) 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", () => { From b916d2631cb25353f69328152625e3d1b9554509 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Fri, 19 Jun 2020 17:11:49 +0100 Subject: [PATCH 17/22] week5 progect hommework --- .../Homework/mandatory/2-project/js/main.js | 84 +++++++++++++++---- 1 file changed, 68 insertions(+), 16 deletions(-) diff --git a/week-5/Homework/mandatory/2-project/js/main.js b/week-5/Homework/mandatory/2-project/js/main.js index f50676c3b..60179672c 100644 --- a/week-5/Homework/mandatory/2-project/js/main.js +++ b/week-5/Homework/mandatory/2-project/js/main.js @@ -1,31 +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 a.btn-primary"); - newDonateBtn.style.backgroundColor = `#ffa500`; - let newVolBtn = document.querySelector(".buttons a.btn-secondary"); - newVolBtn.style.backgroundColor = "black"; - newVolBtn.style.color = "white"; +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 a.btn-primary").style.backgroundColor = `#5751fd`; - document.querySelector(".buttons a.btn-secondary").style.backgroundColor = `#31b0d5`; - document.querySelector(".buttons a.btn-secondary").style.color = `white`; + 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 a.btn-primary").style.backgroundColor = `black`; - document.querySelector(".buttons a.btn-secondary").style.backgroundColor = `#8c9c08`; -} \ No newline at end of file + 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(); +} From d9b2cc1d700930f217eaa3f9d86e2a382585d9f2 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Fri, 19 Jun 2020 17:13:44 +0100 Subject: [PATCH 18/22] week6 inClass ex1 --- week-6/InClass/2-Callbacks/exercise-1/exercise.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/week-6/InClass/2-Callbacks/exercise-1/exercise.js b/week-6/InClass/2-Callbacks/exercise-1/exercise.js index 577e21aaa..0f0d2160b 100644 --- a/week-6/InClass/2-Callbacks/exercise-1/exercise.js +++ b/week-6/InClass/2-Callbacks/exercise-1/exercise.js @@ -10,9 +10,9 @@ Update your code to make the colour change every 5 seconds to something differen ================ */ -setTimeout(function() { - document.body.style.backgroundColor = "yellow" -}, 5000) +// setTimeout(function() { +// document.body.style.backgroundColor = "yellow" +// }, 5000) let colors = ["yellow", "green", "blue","red"]; @@ -24,4 +24,4 @@ setInterval(function(colors) { if (counter >= colors.length) { counter = 0; } -}, 1000, colors); \ No newline at end of file +}, 1000, colors); From fcfd3311818565fac636409d91a178ae631986b5 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Fri, 19 Jun 2020 17:14:36 +0100 Subject: [PATCH 19/22] week6 quotegenerator, no css --- .../mandatory/2-quotegenerator/index.html | 35 +++++++------ .../mandatory/2-quotegenerator/quotes.js | 50 +++++++++++++++++++ .../mandatory/2-quotegenerator/style.css | 8 +++ 3 files changed, 78 insertions(+), 15 deletions(-) diff --git a/week-6/Homework/mandatory/2-quotegenerator/index.html b/week-6/Homework/mandatory/2-quotegenerator/index.html index b6115be49..5553ec485 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/index.html +++ b/week-6/Homework/mandatory/2-quotegenerator/index.html @@ -1,17 +1,22 @@ - - 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..0a67f29e7 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/quotes.js +++ b/week-6/Homework/mandatory/2-quotegenerator/quotes.js @@ -490,3 +490,53 @@ const quotes = [ author: "Zig Ziglar", }, ]; + +//let q = pickFromArray(quotes); +// console.log(q); + +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); + +let click = document.querySelector("#change"); +click.addEventListener("click", newPhrase); + +function newPhrase() { + text = pickFromArray(quotes); + phrase.innerText = text.quote; + author.innerText = text.author; +} + +let autoPlay = document.querySelector("#checkbox"); +autoPlay.addEventListener("CheckboxStateChange", autoPlayOn); + +let counter = 0; +let interval; + +function autoPlayOn() { + let checkbox = document.querySelector("#checkbox"); + let label = document.querySelector("label"); + 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"; + console.log(interval); + clearInterval(interval); + } +} diff --git a/week-6/Homework/mandatory/2-quotegenerator/style.css b/week-6/Homework/mandatory/2-quotegenerator/style.css index 63cedf2d2..54135d946 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/style.css +++ b/week-6/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,9 @@ /** Write your CSS in here **/ +body { + padding: 150px; + } + +h1 { + color: green; + font-style: italic; + } \ No newline at end of file From ade1cbe3eac124b49630bea3ff830fee78f4d0ac Mon Sep 17 00:00:00 2001 From: mara-ber Date: Wed, 24 Jun 2020 20:43:45 +0100 Subject: [PATCH 20/22] quote generator, no css --- .../mandatory/2-quotegenerator/index.html | 8 +++++--- .../mandatory/2-quotegenerator/quotes.js | 11 +++++------ .../mandatory/2-quotegenerator/style.css | 16 +++++++++++----- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/week-6/Homework/mandatory/2-quotegenerator/index.html b/week-6/Homework/mandatory/2-quotegenerator/index.html index 5553ec485..7a9e8b651 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/index.html +++ b/week-6/Homework/mandatory/2-quotegenerator/index.html @@ -11,9 +11,11 @@
- - - +
+ + + +
diff --git a/week-6/Homework/mandatory/2-quotegenerator/quotes.js b/week-6/Homework/mandatory/2-quotegenerator/quotes.js index 0a67f29e7..e5fb4d308 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/quotes.js +++ b/week-6/Homework/mandatory/2-quotegenerator/quotes.js @@ -491,9 +491,6 @@ const quotes = [ }, ]; -//let q = pickFromArray(quotes); -// console.log(q); - let phrase = document.createElement("h1"); let text = pickFromArray(quotes); phrase.innerText = text.quote; @@ -503,6 +500,7 @@ let author = document.createElement("h2"); author.innerText = text.author; main.appendChild(author); +//another quote btn let click = document.querySelector("#change"); click.addEventListener("click", newPhrase); @@ -512,15 +510,16 @@ function newPhrase() { 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() { - let checkbox = document.querySelector("#checkbox"); - let label = document.querySelector("label"); if (checkbox.checked) { label.innerText = "autoplay:ON"; interval = setInterval( @@ -536,7 +535,7 @@ function autoPlayOn() { ); } else { label.innerText = "autoplay:OFF"; - console.log(interval); clearInterval(interval); } } + diff --git a/week-6/Homework/mandatory/2-quotegenerator/style.css b/week-6/Homework/mandatory/2-quotegenerator/style.css index 54135d946..3900ae95a 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/style.css +++ b/week-6/Homework/mandatory/2-quotegenerator/style.css @@ -1,9 +1,15 @@ /** Write your CSS in here **/ body { - padding: 150px; - } + padding: 150px; +} h1 { - color: green; - font-style: italic; - } \ No newline at end of file + color: green; + font-style: italic; +} + +#secondary { + position: fixed; + bottom: 20px; + right: 30px; +} From 5cf37705ef1ca75d1a601dcda6835adde82f5d8c Mon Sep 17 00:00:00 2001 From: mara-ber Date: Wed, 24 Jun 2020 20:44:26 +0100 Subject: [PATCH 21/22] week6 DOM-practice tasks1,2 --- week-6/Homework/mandatory/3-DOM-practice/main.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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 From 1e8e442004b4080f7fb8229858ff605b8854b9a4 Mon Sep 17 00:00:00 2001 From: mara-ber Date: Sat, 27 Jun 2020 12:31:14 +0100 Subject: [PATCH 22/22] slideshow --- week-6/Homework/extra/2-slideshow/index.html | 41 ++++++++----- .../Homework/extra/2-slideshow/slideshow.js | 60 +++++++++++++++++++ week-6/Homework/extra/2-slideshow/style.css | 4 ++ 3 files changed, 90 insertions(+), 15 deletions(-) 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; +}