diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..92954f3 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,18 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${file}" + } + ] +} \ No newline at end of file diff --git a/Week-2/Homework/mandatory/0-khanacademy/khanacademy.md b/Week-2/Homework/mandatory/0-khanacademy/khanacademy.md index 82aee97..3ae0b65 100644 --- a/Week-2/Homework/mandatory/0-khanacademy/khanacademy.md +++ b/Week-2/Homework/mandatory/0-khanacademy/khanacademy.md @@ -9,3 +9,5 @@ You should complete the following sections from this online tutorial: - DOM events https://www.khanacademy.org/computing/computer-programming/html-css-js + +completed the course. \ No newline at end of file diff --git a/Week-2/Homework/mandatory/1-study/study.md b/Week-2/Homework/mandatory/1-study/study.md index 11acc1a..9ccdc83 100644 --- a/Week-2/Homework/mandatory/1-study/study.md +++ b/Week-2/Homework/mandatory/1-study/study.md @@ -1,8 +1,11 @@ # Readings - [MDN - Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) +read this page. - [Eloquent JavaScript - The Document Object Model](https://eloquentjavascript.net/14_dom.html) - + read this page. # Watch -- [Easy Way to Understand How the DOM Works](https://www.youtube.com/watch?v=2Tld4yyN_tw) \ No newline at end of file +- [Easy Way to Understand How the DOM Works](https://www.youtube.com/watch?v=2Tld4yyN_tw) + + watched this video. \ No newline at end of file diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..633704c 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -15,6 +15,15 @@ */ function exerciseOne(arrayOfPeople) { let content = document.querySelector("#content"); + for(var i=0;i should log a list of nodes with a length of 3 -*/ - +*/ let getAllParagraphElements = document.querySelectorAll( + "p" +); +console.log(getAllParagraphElements); +let getDivNode = document.querySelector(".site-header"); +console.log(getDivNode); +let getJumbotronText = document.querySelector("#jumbotron-text"); +console.log(getJumbotronText); +let getParagraphInsidePrimaryContent = document.querySelectorAll( + ".primary-content p" +); +console.log(getParagraphInsidePrimaryContent); /* Task 2 @@ -23,15 +33,22 @@ 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 clickAlertButton = document.querySelector("#alertBtn"); +clickAlertButton.addEventListener("click", function (event) { + alert("Thanks 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 getChangeColorButton = document.querySelector("#bgrChangeBtn"); +getChangeColorButton.addEventListener("click", function (event) { + let colors = ["lightBlue", "Pink", "Yellow"]; + document.querySelector("body").style.backgroundColor = + colors[Math.floor(Math.random() * colors.length)]; +}); /* Task 4 @@ -39,12 +56,24 @@ 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 getReadMoreButton = document.querySelector("#addTextBtn"); +getReadMoreButton.addEventListener("click", function (event) { + let newText = document.createElement("p"); + newText.textContent = "New Text Paragraph added"; + let displayText = document.querySelector(".buttons"); + displayText.append(newText); +}); /* 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 getLargerLinks = document.querySelector("#largerLinksBtn"); +getLargerLinks.addEventListener("click", function (event) { + let getAllLinks = document.querySelectorAll("a"); + for(var i=0;i