AltCampus · manishkushare · May 8, 2020
diff --git a/assignments/DOM Basics/01/index.html b/assignments/DOM Basics/01/index.html
@@ -9,8 +9,9 @@
   <body>
     <body>
       <h1>Document Object Model</h1>
-    <script>
+    <script src="./test.js">
       // your code goes here
+
     </script>
   </body>
 </html>
diff --git a/assignments/DOM Basics/01/test.js b/assignments/DOM Basics/01/test.js
@@ -0,0 +1,29 @@
+
+let newElem = document.body;
+let newP = document.createElement("p");
+newP.textContent = 'Hello Javascript!';
+newP.innerHTML = "I love <strong>Javascript</strong>"
+newElem.append(newP);
+
+let ulList = document.createElement("ul");
+ulList.className = 'ullist';
+
+let ullist = document.querySelector(".ullist");
+ulList.innerHTML= "<li>Buy groceries</li><li>Feed the cat</li><li>Do laundry</li>";
+document.body.append(ulList);
+
+let newList = document.createElement("li");
+newList.textContent= "make food"
+ulList.appendChild(newList);
+
+ulList.removeChild(newList);
+
+// ulList.firstElementChild.remove() // will remove buy grocerries
+
+// ulList.lastElementChild.remove()// will remove last element child
+
+// ulList.firstChild.remove() // willremove buy groceeries
+
+ulList.firstChild.nextSibling.nextSibling.remove() // will remove 3rd child element
+
+
diff --git a/assignments/DOM Basics/02/index.html b/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
+      ///////////1////////
+      let demo = document.getElementById("demo");
+      demo.style.border= "1px solid purple";
+
+      ////////////////2//////////////////
+      let demoClass = document.querySelectorAll(".demo");
+      demoClass.forEach(element => {
+        element.style.border = "1px solid orange"
+      });
+
+      // let demoClass = document.getElementsByClassName("demo");
+      // demoClass.forEach(elem => {
+      //   elem.style.border = "1px solid orange"}); 
+      // Why this is not working
+
+      ////////////////3//////////////////////
+
+      // let articles = document.querySelectorAll("article");
+      // console.log(articles);
+      // articles[0].style.border="1px solid blue";
+
+      // let articles = document.getElementsByTagName("article");
+      // articles.style.border="1px solid blue";
+
+
+      let articles = document.querySelectorAll("article");
+      articles.forEach(elem => {elem.style.border="1px solid blue"});
+
+      /////////////4////////////////////
+
+      let demo_query = document.querySelector("#demo-query");
+      demo_query.style.border= "1px solid grey"
+
+      ///////////////5/////////////////
+
+      let demo_query_all = document.querySelectorAll(".demo-query-all");
+      demo_query_all.forEach(elem => {elem.style.border= "1px solid green"});
+
     </script>
   </body>
 </html>
diff --git a/assignments/DOM Basics/03/index.html b/assignments/DOM Basics/03/index.html
@@ -38,6 +38,37 @@ <h2>Types of Sharks</h2>
     const h1 = document.getElementsByTagName("h1")[0];
     const p = document.getElementsByTagName("p")[0];
     const ul = document.getElementsByTagName("ul")[0];
-    // Your code goes here
+    // // Your code goes here
+
+    ////////////////1/////////////////
+    ul.firstElementChild.style.color = "green";
+
+    ////////////////////////2////////////////////
+
+    let list= document.querySelectorAll("li")
+    list.forEach(elem => {elem.style.color= "blue"});
+
+    /////////////////////3//////////////////////////
+
+    let lilist = document.querySelectorAll("li");
+    let lilist_item = lilist.length;
+    lilist[lilist_item-1].style.color = "red"
+
+    //////////////4///////////////////////
+
+    let lilist1 = document.querySelectorAll("li");
+    let lilist_item1 = lilist1.length;
+    lilist1[lilist_item1-2].style.color = "orange"
+
+    ////////////////5/////////////////////////
+
+
+    ul.firstElementChild.style.backgroundColor = "coral"
+    ul.lastElementChild.style.backgroundColor= "aquamarine"
+
+
+
+
+
   </script>
 </html>
diff --git a/assignments/DOM Basics/04/index.html b/assignments/DOM Basics/04/index.html
@@ -12,5 +12,18 @@ <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.querySelector("#nickname").innerHTML= "Manish";
+      document.querySelector("#favorites").innerHTML= "Real Madrid";
+      document.querySelector("#hometown").innerHTML="Nashik";
+
+      document.querySelectorAll("li").forEach(elem => {elem.className = "listitem"});
+      document.querySelectorAll(".listitem").forEach(x => {x.style.color= "red"});
+
+      let pic = document.createElement("img");
+      pic.src= "https://www.instagram.com/p/B1yQA46nrjNzsgNx1ykdey-OQw0X6TIG9EdnY40/?igshid=od1h741ncjqb";
+      document.body.append(pic);
+    </script>
   </body>
 </html>
diff --git a/assignments/events/1. Practice/index.js b/assignments/events/1. Practice/index.js
@@ -1,42 +1,47 @@
 //Select the section with an id of container without using querySelector.
-
+let container = document.getElementById("container");
 
 //Select the section with an id of container using querySelector.
-
+let container1 = document.querySelector("#container");
 
 //Select all of the list items with a class of "second".
-
+let second = document.getElementsByClassName("second");
+document.querySelectorAll(".second");
 
 
 //Select a list item with a class of third, but only the list item inside of the ol tag.
+let orderlist = document.querySelector("ol");
+orderlist.getElementsByClassName("third");
 
 
 
 //Give the section with an id of container the text "Hello!".
-
+// container.innerText= "Hello!"
 
 
 //Add the class main to the div with a class of footer.
 
-
+let footer= document.querySelector(".footer");
+footer.classList.add("main")
 
 //Remove the class main on the div with a class of footer.
-
+footer.classList.remove("main");
 
 //Create a new li element.
-
+let newli= document.createElement("li");
 
 
 //Give the li the text "four".
-
+newli.innerText= "four";
 
 
 //Append the li to the ul element.
-
+document.querySelector("ul").append(newli);
 
 
 //Loop over all of the list inside the ol tag and give them a background color of "green".
+document.querySelectorAll("ol").forEach(elem => elem.style.backgroundColor= "green");
 
 
-
-//Remove the div with a class of footer.
+//Remove the div with a class of footer.
+document.querySelector(".footer").remove();
diff --git a/assignments/events/2. backgroundChange/index.html b/assignments/events/2. backgroundChange/index.html
@@ -8,6 +8,13 @@
     <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
   </head>
   <body>
+    <h1>Welcome to website</h1>
+    <div class="btn">
+      <button>Explore more</button>
+    </div>
+
+
+
     <script src="main.js"></script>
   </body>
 </html>
diff --git a/assignments/events/2. backgroundChange/main.css b/assignments/events/2. backgroundChange/main.css
@@ -0,0 +1,9 @@
+h1 {
+    font-size: 100px;
+    text-align: center;
+
+}
+.btn {
+    display: block;
+    text-align: center;
+}
diff --git a/assignments/events/2. backgroundChange/main.js b/assignments/events/2. backgroundChange/main.js
@@ -0,0 +1,29 @@
+let clickbackground = document.body;
+function backgroundColor() {
+    clickbackground.style.background= "red";
+    console.log("done");
+
+}
+clickbackground.addEventListener('click', backgroundColor);
+
+
+//////////////////////////////////////////////////////////////////////
+
+let getColor = function () {
+    let color = "#";
+    let values = "ABCDEF0123456789".split("");
+
+       for (let i = 0; i<6; i++) {
+
+          let randomNum = Math.floor(Math.random() * 16);;
+          color = color + values[randomNum];
+
+       }
+    return color;
+ }
+
+
+ document.addEventListener("click", () => {
+    document.body.style.backgroundColor = getColor();
+ });
+
diff --git a/assignments/events/3. randomQuotes/index.html b/assignments/events/3. randomQuotes/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE htmlsection>
 <html>
 <head>
   <meta charset="utf-8" />
@@ -8,6 +8,28 @@
   <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
 </head>
 <body>
+  <header class="heading">
+    <h1 class="header">Quotes</h1>
+  </header>
+  <main>
+    <div class="container">
+      <h2 class="subHeading">
+        coding is art
+      </h2>
+      <p class="para">
+
+      </p>
+    </div>
+
+  </main>
+  <footer class="footersection">
+    <div class="container btnpos">
+      <button class="btn">Please press space to generate random quotes</button>
+    </div>
+
+  </footer>
+
+
 <script src="main.js"></script>
 </body>
 </html>
diff --git a/assignments/events/3. randomQuotes/main.css b/assignments/events/3. randomQuotes/main.css
@@ -0,0 +1,34 @@
+.header {
+    text-align: center;
+    /* padding-bottom: 50px ; */
+    /* background-color: aqua; */
+}
+.heading {
+    padding: 50px 0;
+    background-color: aqua;
+}
+
+.subHeading {
+    border: 2px solid black;
+    text-align: center;
+    height: 100px;
+}
+
+.para {
+    border: 2px solid black;
+    text-align: center;
+    margin: 50px 0;
+    height: 50px;
+}
+
+.container {
+    max-width: 1000px;
+    margin: 0  auto;
+}
+.footersection {
+    background-color: aqua;
+    padding: 50px 0;
+}
+.btnpos{
+    text-align: center;
+}
diff --git a/assignments/events/3. randomQuotes/main.js b/assignments/events/3. randomQuotes/main.js
@@ -3,6 +3,43 @@ var quotes;
 // Write your code here
 
 
+function getRandomNumber() {
+    return Math.floor(Math.random()*77);
+}
+
+function getRandomAuthor() {
+    let authorQuote = quotes.map(elem => {return elem.quoteAuthor});
+    let randomAuthor = getRandomNumber();
+    let authorGenerated = authorQuote[randomAuthor];
+    return authorGenerated;
+}
+
+function getRandomQuote() {
+    let textQuote = quotes.map( elem => {return elem.quoteText});
+    // let authorQuote = quotes.map(elem => {return elem.quoteAuthor})
+    let randomQuote= getRandomNumber();
+    let quoteGenerated = textQuote[randomQuote];
+    return quoteGenerated;
+}
+
+function handleEvent(event) {
+    console.log(handleEvent)
+    if(event.keyCode == 32) {
+        let subHeading= document.querySelector(".subHeading");
+        subHeading.innerText = getRandomQuote();
+
+        let para= document.querySelector(".para");
+        para.innerHTML= getRandomAuthor();
+
+    }
+}
+
+
+document.addEventListener("keyup", handleEvent) 
+
+
+
+
 
 quotes = [
     {

diff --git a/assignments/events/3. randomQuotes/todo.md b/assignments/events/3. randomQuotes/todo.md
@@ -3,3 +3,4 @@
 1. Make a website where you display quotes form the quotes array in `main.js`.
 2. When you press `space` key the quote should change.
 3. Make the quote change random.
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@
		1. Make a website where you display quotes form the quotes array in `main.js`.
		2. When you press `space` key the quote should change.
		3. Make the quote change random.