Develop

assignments/DOM Basics/01/index.html

@@ -11,6 +11,30 @@
       <h1>Document Object Model</h1>
     <script>
       // your code goes here
+      var para = document.createElement("p");
+      para.textContent = 'Hello Javascript!';
+      para.innerHTML = `I love <strong>Javascript</strong>`; 
+      document.body.appendChild(para);
+
+      var ul = document.createElement("ul");
+      var li = ["Buy groceries", "Feed the cat", "Do laundry"];
+
+      for (i=0; i < li.length; i++){
+
+        var li1 = document.createElement("li");
+
+        li1.innerHTML = li[i];
+        ul.appendChild(li1);
+      }
+
+      document.body.appendChild(ul);
+
+      var newLi = document.createElement("li");
+      newLi.innerHTML = "Potatoes";
+
+      ul.appendChild(newLi);
+
+      ul.children[2].remove();
     </script>
   </body>
 </html>

assignments/DOM Basics/02/index.html

@@ -47,6 +47,44 @@ <h2>Query Selector All</h2>
     <div class="demo-query-all">Access me by query all (2)</div>
     <script>
       // your code goes here
+
+      document.getElementById("demo").style.border  = "1px solid purple";
+       document.getElementById("demo").style.color = "purple";
+
+      function changeDemoColor () {
+      var demoColor = document.getElementsByClassName("demo");
+      for (i=0; i < demoColor.length; i++) {
+      demoColor[i].style.color = "orange";
+      demoColor[i].style.border = "1px solid orange";
+       }
+          };
+
+      changeDemoColor();
+
+
+      function changearticleColor () {
+      var articleColor = document.getElementsByTagName("article");
+      for (i=0; i < articleColor.length; i++) {
+      articleColor[i].style.color = "blue";
+      articleColor[i].style.border = "1px solid blue";
+       }
+        };
+
+    changearticleColor();
+
+    document.querySelector("#demo-query").style.border = `1px solid grey`;
+
+    function demoQuery(){
+
+      var demoQueryColor = document.querySelectorAll(".demo-query-all");
+      for(i=0; i < demoQueryColor.length; i++) {
+
+        demoQueryColor[i].style.border = "1px solid green";
+      }
+    };
+
+    demoQuery();
+
     </script>
   </body>
 </html>

assignments/DOM Basics/03/index.html

@@ -32,12 +32,27 @@ <h2>Types of Sharks</h2>
       <li>Tiger</li>
       <li>Great White</li>
     </ul>
-  </body>
-
-  <script>
+    <script>
     const h1 = document.getElementsByTagName("h1")[0];
     const p = document.getElementsByTagName("p")[0];
     const ul = document.getElementsByTagName("ul")[0];
     // Your code goes here
+
+    document.firstElementChild.children[1].children[3].children[0].style.backgroundColor = "hotpink";
+
+    var change = document.body.children[3].children;
+    for (i=0; i < change.length; i++) {
+    change[i].style.backgroundColor = "yellow"
+    };
+
+    document.body.children[3].children[2].style.color = "pink";
+
+    document.body.children[3].children[1];
+
+    document.body.children[4].previousElementSibling.children[0].style.backgroundColor = "coral";
+
+    document.body.children[4].previousElementSibling.children[2].style.backgroundColor = "aquamarine";
+
   </script>
+  </body>
 </html>

assignments/DOM Basics/04/index.html

@@ -12,5 +12,27 @@ <h1>About Me</h1>
       <li>Favorites: <span id="favorites"></span></li>
       <li>Hometown: <span id="hometown"></span></li>
     </ul>
+
+    <script>
+
+      document.body.style.fontFamily = "Arial, sans-serif";
+
+      document.getElementById("nickname").textContent = "Janu";
+      document.getElementById("favorites").textContent = "Food";
+      document.getElementById("hometown").textContent = "Pune";
+
+      document.querySelectorAll("li").className = "listitem";
+      var ulList = document.querySelectorAll("li");
+      [...ulList].forEach(function(n){
+      n.style.color = "red"
+      });
+
+      var image = document.createElement("img");
+      image.setAttribute ("src","download.jpeg");
+      image.setAttribute("alt", "nature");
+      document.body.appendChild(image);
+
+
+    </script>
   </body>
 </html>

assignments/events/1. Practice/index.js

@@ -1,42 +1,63 @@
 //Select the section with an id of container without using querySelector.
 
+document.getElementById("container");
+
 
 //Select the section with an id of container using querySelector.
 
+document.querySelector("#container");
+
 
 //Select all of the list items with a class of "second".
 
+document.body.querySelectorAll(".second");
+
 
 
 //Select a list item with a class of third, but only the list item inside of the ol tag.
 
+document.body.children[1].lastElementChild.querySelector(".third");
+
 
 
 //Give the section with an id of container the text "Hello!".
 
+document.getElementById("container").textContent = "Hello";
 
 
-//Add the class main to the div with a class of footer.
 
+//Add the class main to the div with a class of footer.
 
+	var footerClass = document.querySelector(".footer");
+	footerClass.className = "main";
 
 //Remove the class main on the div with a class of footer.
 
+document.querySelector(".main").className = "footer";
+
 
 //Create a new li element.
 
+var elementLi = document.createElement("li");
 
 
 //Give the li the text "four".
 
+elementLi.innerText = "four";
+
 
 
 //Append the li to the ul element.
 
+document.body.querySelector('ul').appendChild(li);
+
 
 
 //Loop over all of the list inside the ol tag and give them a background color of "green".
 
+document.querySelectorAll("ol").forEach((cb) => {cb.style.background = "green"});
+
 
+//Remove the div with a class of footer.
 
-//Remove the div with a class of footer.
+document.querySelector(".footer").remove();

assignments/events/2. backgroundChange/index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
   </head>
   <body>
+    <h1>Hello World</h1>
     <script src="main.js"></script>
   </body>
 </html>

assignments/events/2. backgroundChange/main.css

@@ -0,0 +1,3 @@
+body{
+	background-color: white;
+}

assignments/events/2. backgroundChange/main.js

@@ -0,0 +1,12 @@
+function changeBackground(){
+	document.body.style.backgroundColor = "hotpink"
+};
+
+document.body.addEventListener("mousemove", changeBackground);
+
+function random() {
+	var col = `#${String(9597547352642325273375 * Math.random()).slice(0, 6)}`;
+	document.body.style.backgroundColor = col;
+}
+
+document.body.addEventListener("mousemove", random);

assignments/events/3. randomQuotes/index.html

@@ -8,6 +8,12 @@
   <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
 </head>
 <body>
+	<h1>Click For Random Quotes</h1>
+	<div>
+		<p id = "quotedisplay"></p>
+		<p id = "quoteauthor"></p>
+	</div>
+	<button id = "clicked">Click</button>
 <script src="main.js"></script>
 </body>
 </html>

assignments/events/3. randomQuotes/main.js

@@ -3,7 +3,6 @@ var quotes;
 // Write your code here
 
 
-
 quotes = [
     {
         "quoteAuthor": "Thomas Edison",
@@ -314,3 +313,11 @@ quotes = [
         "quoteText": "Great talent finds happiness in execution."
     }
 ];
+
+function newQuote () {
+
+    var randomQuote = Math.floor((Math.random() * quotes.length));
+    document.getElementById("quotedisplay").innerHTML = quotes[randomQuote].quoteText;
+    document.getElementById("quoteauthor").innerHTML = quotes[randomQuote].quoteAuthor;
+}
+document.getElementById("clicked").addEventListener("click", newQuote);

assignments/events/4. mouseMove/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mouse-Over</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+</head>
+<body>
+	<h1>MouseOver Event</h1>
+	<p id = screenx></p>
+	<p id = screeny></p>
+	<p id = clientx></p>
+	<p id = clienty></p>
+
+	<script>
+		function mouse(){
+			var x = event.screenX;
+			var y =  event.screenY;
+			var a = event.clientX;
+			var b = event.clientY;
+
+			document.getElementById("screenx").innerText = x;
+			document.getElementById("screeny").innerText = y;
+			document.getElementById("clientx").innerText = a;
+			document.getElementById("clienty").innerText = b;
+
+		}
+
+		document.addEventListener("mousemove", mouse);
+
+	</script>