From 6d1674d760f7154161b66a86af3d74cb4a238e70 Mon Sep 17 00:00:00 2001 From: "domenico.cyf" Date: Wed, 3 Mar 2021 12:21:53 +0000 Subject: [PATCH 1/2] Some Updates --- Week-2/InClass/A-dom-manipulation/exercise.js | 43 +++++++++++++++---- 1 file changed, 35 insertions(+), 8 deletions(-) diff --git a/Week-2/InClass/A-dom-manipulation/exercise.js b/Week-2/InClass/A-dom-manipulation/exercise.js index bb4f2e9..6f8fd43 100644 --- a/Week-2/InClass/A-dom-manipulation/exercise.js +++ b/Week-2/InClass/A-dom-manipulation/exercise.js @@ -15,36 +15,63 @@ Write JavaScript below that logs: --> should log a list of nodes with a length of 3 */ - +console.log(document.querySelectorAll("p")); +console.log(document.querySelector("div")); +console.log(document.querySelectorAll("#jumbotron-text")); +console.log(document.querySelectorAll(".primary-content p")); /* 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 clickButton = document.getElementById("alertBtn"); +clickButton.addEventListener("click", alertSomething); + function alertSomething() { + alert("Thanks, Domenico for visiting Bikes for Refugees!"); + } /* Task 3 ======= Write JavaScript below that changes the background colour of the page when the 'Change colour' button is clicked. */ - - +let clickBackgroundButton = document.getElementById("bgrChangeBtn"); +function changeBackground() { +document.body.style.backgroundColor = "blue"; +} +clickBackgroundButton.addEventListener("click", changeBackground); /* 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 clickThatButton = document.getElementById("addTextBtn"); - +clickThatButton.addEventListener("click", addNewPar); + function addNewPar() { + let paragraph = document.createElement("p"); + paragraph.innerText = "Read more below."; + let myElement = document.querySelector(".buttons"); + myElement.appendChild(paragraph); + }; /* Task 5 ====== When the 'Larger links!' button is clicked, the text of all links on the page should increase. -*/ \ No newline at end of file +*/ +let largerLinkButton = document.querySelector("#largerLinksBtn"); + console.log(largerLinkButton); + largerLinkButton.addEventListener("click", makeLinksLarger); + +let allLinks = document.querySelectorAll("a"); + function makeLinksLarger() { + console.log(allLinks) + for( let i = 0 ; i < allLinks.length; i++) { + console.log(allLinks); + allLinks[i].style.fontSize = "50px"; + } + } \ No newline at end of file From 619f9d4e3dcd194f28c7338d7004919c15ce7f46 Mon Sep 17 00:00:00 2001 From: "domenico.cyf" Date: Mon, 22 Mar 2021 18:24:25 +0000 Subject: [PATCH 2/2] Update main.js --- Week-3/InClass/DOM-practice/main.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/Week-3/InClass/DOM-practice/main.js b/Week-3/InClass/DOM-practice/main.js index be9f609..1d8aae5 100644 --- a/Week-3/InClass/DOM-practice/main.js +++ b/Week-3/InClass/DOM-practice/main.js @@ -5,10 +5,16 @@ console.log("Testing JS file loaded!") // Without changing any of the HTML or CSS, update the
tags so that they have white backgrounds. +function sum(a,b){ + + return a + b; +} +console.log(sum(12,1)); - +let sum2 = (a,b) => a+b; +console.log(sum2(2,3)) // Task 2 // Without changing any of the HTML or CSS, update the images on the page so that they are all centered.