Ali haider js2 week 2

.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": [
+                "<node_internals>/**"
+            ],
+            "program": "${file}"
+        }
+    ]
+}

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.

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)
+- [Easy Way to Understand How the DOM Works](https://www.youtube.com/watch?v=2Tld4yyN_tw)
+
+ watched this video.

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.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;
+    }
+
+
+
+});

Week-2/InClass/A-dom-manipulation/exercise.js

@@ -14,37 +14,66 @@ 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
 ======
 
 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
 ======
 
 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.
-*/
+*/
+
+let getLargerLinks = document.querySelector("#largerLinksBtn");
+getLargerLinks.addEventListener("click", function (event) {
+ let getAllLinks = document.querySelectorAll("a");
+ for(var i=0;i<getAllLinks.length;i++){
+     getAllLinks[i].style.fontSize="xx-large";
+ }
+});