From 17a52b7293815f680585a1426494ffc451957e3b Mon Sep 17 00:00:00 2001 From: Ali Haider Date: Sat, 22 Aug 2020 09:29:35 +0100 Subject: [PATCH 1/7] In Class exercise.js Completed. --- Week-2/InClass/A-dom-manipulation/exercise.js | 47 +++++++++++++++---- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/Week-2/InClass/A-dom-manipulation/exercise.js b/Week-2/InClass/A-dom-manipulation/exercise.js index bb4f2e9..0f8ea45 100644 --- a/Week-2/InClass/A-dom-manipulation/exercise.js +++ b/Week-2/InClass/A-dom-manipulation/exercise.js @@ -14,8 +14,18 @@ Write JavaScript below that logs: 4. all the "p" elements of contained inside the .primary-content element node --> 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 Date: Sat, 22 Aug 2020 11:56:36 +0100 Subject: [PATCH 2/7] update --- .vscode/launch.json | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 .vscode/launch.json 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 From 9e708feb257faabcd638364acbe2c0cab431ccba Mon Sep 17 00:00:00 2001 From: Ali Haider Date: Sun, 23 Aug 2020 22:07:57 +0100 Subject: [PATCH 3/7] khan academy and study completed. --- Week-2/Homework/mandatory/0-khanacademy/khanacademy.md | 2 ++ Week-2/Homework/mandatory/1-study/study.md | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) 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 From fb03ee379ba35a07969a84ba6d0f7d4acb1c6f89 Mon Sep 17 00:00:00 2001 From: Ali Haider Date: Sun, 23 Aug 2020 22:55:37 +0100 Subject: [PATCH 4/7] exercise 1 and 2 completed --- .../Homework/mandatory/2-exercises/exercises.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..810dba1 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 Date: Mon, 24 Aug 2020 00:08:29 +0100 Subject: [PATCH 5/7] exercises completed. --- .../mandatory/2-exercises/exercises.js | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 810dba1..633704c 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -35,7 +35,7 @@ function exerciseOne(arrayOfPeople) { */ function exerciseTwo(shopping) { //Write your code in here - let content = document.querySelector("#content") + let content = document.querySelector("#content"); var shoppingList = document.createElement("ul"); for(var i=0;i Date: Mon, 24 Aug 2020 01:04:51 +0100 Subject: [PATCH 6/7] project completed. --- .../Homework/mandatory/3-project/js/main.js | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/Week-2/Homework/mandatory/3-project/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index e69de29..4ef0e99 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -0,0 +1,60 @@ +let blueButton = document.querySelector("#blueBtn"); +blueButton.addEventListener("click", function(){ + let jumbotron = document.querySelector(".jumbotron"); + jumbotron.style.backgroundColor = "#588fbd"; + let donateButton = document.querySelector(".buttons").firstElementChild; + donateButton.style.backgroundColor = "#ffa500"; + let volunteerButton = document.querySelector(".btn-secondary"); + volunteerButton.style.backgroundColor= "black"; + volunteerButton.style.color ="white"; + +}); +let orangeButton = document.querySelector("#orangeBtn"); +orangeButton.addEventListener("click", function () { + let jumbotron = document.querySelector(".jumbotron"); + jumbotron.style.backgroundColor = "#f0ad4e"; + let donateButton = document.querySelector(".buttons").firstElementChild; + donateButton.style.backgroundColor = "#5751fd"; + let volunteerButton = document.querySelector(".btn-secondary"); + volunteerButton.style.backgroundColor = "#31b0d5"; + volunteerButton.style.color = "white"; + +}); +let greenButton = document.querySelector("#greenBtn"); + greenButton.addEventListener("click", function () { + let jumbotron = document.querySelector(".jumbotron"); + jumbotron.style.backgroundColor = "#87ca8a"; + let donateButton = document.querySelector(".buttons").firstElementChild; + donateButton.style.backgroundColor = "black"; + let volunteerButton = document.querySelector(".btn-secondary"); + volunteerButton.style.backgroundColor = "#8c9c08"; + + }); + +let submitButton = document.querySelector("form").lastElementChild; +submitButton.addEventListener("click",function(e){ + e.preventDefault(); + let getForm = document.querySelectorAll(".form-control"); + if (getForm[0].value == "" && getForm[1].value == "" && getForm[2].value == "") { + + alert("Please Enter Name , E-mail and also describe yourself"); + return false; + } + + + else if (getForm[1].value == "" && getForm[2].value == "") { + alert("Please enter name and describe yourself"); + return false; + } + else if (getForm[1].value == "") { + alert("please enter name"); + return false; + } + else if (getForm[2].value == "") { + alert("please describe yourself"); + return false; + } + + + +}); From 1683053330af2886fe3728648cfce45deb4bb719 Mon Sep 17 00:00:00 2001 From: Ali Haider Date: Mon, 24 Aug 2020 01:07:57 +0100 Subject: [PATCH 7/7] update the project. --- Week-2/Homework/mandatory/3-project/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week-2/Homework/mandatory/3-project/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index 4ef0e99..7590603 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -32,8 +32,8 @@ let greenButton = document.querySelector("#greenBtn"); }); let submitButton = document.querySelector("form").lastElementChild; -submitButton.addEventListener("click",function(e){ - e.preventDefault(); +submitButton.addEventListener("click",function(){ + // e.preventDefault(); let getForm = document.querySelectorAll(".form-control"); if (getForm[0].value == "" && getForm[1].value == "" && getForm[2].value == "") {