initial commit

assignments/DOM Basics/01/index.html

@@ -11,6 +11,42 @@
       <h1>Document Object Model</h1>
     <script>
       // your code goes here
+      let  p = document.createElement('p');
+      p.textContent = "Hello Javascript!" 
+      p.innerText = "I love <strong>Javascript </strong>";
+      document.body.append(p);
+
+      //create ul tag
+      /*<ul>
+      <li>Buy groceries</li>
+      <li>Feed the cat</li>
+      <li>Do laundry</li>
+      </ul>*/
+      let ul = document.createElement('ul');
+      document.body.append(ul);
+      p.insertAdjacentHTML('afterend',' <ul></ul>');
+      //1st li
+      li1 =document.createElement('li');
+      li1.textContent = "Buy groceries";
+      ul.append(li1);
+      //2nd li
+      li2 =document.createElement('li');
+      li2.textContent = "Feed the cat";
+      ul.append(li2);
+      //3rd li
+      li3 =document.createElement('li');
+      li3.textContent = "Do laundry";
+      ul.append(li3);
+      //4th li
+      li4 = document.createElement('li');
+      li4.textContent = "new li";
+      ul.appendChild(li4);
+
+      //remove the 4th li
+      // ul.removeChild(li4);
+      li4.remove();
+
+
     </script>
   </body>
 </html>

assignments/DOM Basics/02/index.html

@@ -47,6 +47,21 @@ <h2>Query Selector All</h2>
     <div class="demo-query-all">Access me by query all (2)</div>
     <script>
       // your code goes here
+      //1
+      let demoId = document.querySelector("#demo");
+      demoId.style.border = "1px solid purple";
+      //2
+      let demoClass = document.querySelectorAll(".demo");
+      demoClass.forEach(elem => elem.style.border = "1px solid orange");
+      //3
+      let articleByTagName = document.querySelectorAll("article");
+      articleByTagName.forEach(elem => elem.style.border = "1px solid blue");
+      //4
+      let demoQuery = document.querySelector("#demo-query");
+      demoQuery.style.border = "1px solid grey";
+      //5
+      let demoQueryAll = document.querySelectorAll(".demo-query-all");
+      demoQueryAll.forEach(elem => elem.style.border = "1px solid green");
     </script>
   </body>
 </html>

assignments/DOM Basics/03/index.html

@@ -39,5 +39,20 @@ <h2>Types of Sharks</h2>
     const p = document.getElementsByTagName("p")[0];
     const ul = document.getElementsByTagName("ul")[0];
     // Your code goes here
+
+    //1
+    let firstLi = document.querySelector("ul");
+    firstLi.firstElementChild.style.backgroundColor = "green";
+    //2
+    let allLi = document.querySelectorAll("li");
+    allLi.forEach(elem => elem.style.backgroundColor = "orange");
+    //3
+    let pinkLi = document.querySelectorAll("li")[2];
+    pinkLi.style.backgroundColor = "pink";
+    //4
+    let middleLi = document.querySelectorAll("li")[1];
+    //5
+    middleLi.previousElementSibling.style.backgroundColor = "coral"; 
+    middleLi.nextElementSibling.style.backgroundColor = "aquamarine";
   </script>
 </html>

assignments/DOM Basics/04/index.html

@@ -12,5 +12,28 @@ <h1>About Me</h1>
       <li>Favorites: <span id="favorites"></span></li>
       <li>Hometown: <span id="hometown"></span></li>
     </ul>
+    <!--1.Add a script tag to the bottom.-->
+    <script>
+      //change body style font-family to 'Arail','sans-serif'
+      document.body.style.fontFamily="Arial","sans-serif";
+      //replace spans
+      document.querySelector('#nickname').innerText = "Sudhanshu";
+      document.querySelector('#favorites').innerText = "Sports";
+      document.querySelector('#hometown').innerText = "Rourkela";
+
+      //change the class to 'listitem'
+      var li = document.querySelectorAll('li').forEach(elem => elem.className = "listitem");
+
+      //Add a style tag that sets a rule for "listitem" to make the color red
+      var style = document.createElement("style");
+      style.innerHTML = ".listitem {color:red}";
+      document.body.append(style);
+
+      //Create a new img element and set its src attribute to a picture of you. Append that element to the page
+      var image = document.createElement("img");
+      image.src = "https://avatars2.githubusercontent.com/u/37769721?s=460&v=4";
+      document.body.append(image);
+
+    </script>
   </body>
 </html>

assignments/events/1. Practice/index.js

@@ -1,42 +1,47 @@
 //Select the section with an id of container without using querySelector.
-
+let sec = document.getElementById("container");
 
 //Select the section with an id of container using querySelector.
 
-
+let sec = document.querySelector("#container");
 //Select all of the list items with a class of "second".
 
-
+let liClass = document.querySelectorAll(".second");
 
 //Select a list item with a class of third, but only the list item inside of the ol tag.
-
+let liInol = document.querySelector("ol> li:last-child");
 
 
 //Give the section with an id of container the text "Hello!".
 
-
+let sect = document.querySelector('#container');
+sect = "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 = four;
 //Append the li to the ul element.
 
-
+ul.append(li);
 
 //Loop over all of the list inside the ol tag and give them a background color of "green".
 
+let olList = document.querySelectorAll("ol>li");
+olList.forEach(elem => elem.styl.background = "green");
 
+//Remove the div with a class of footer.
 
-//Remove the div with a class of footer.
+div.classList.remove("footer");

assignments/events/2. backgroundChange/index.html

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

assignments/events/2. backgroundChange/main.js

@@ -0,0 +1,27 @@
+//target
+const change = document.querySelector("body");
+
+
+
+//callback function
+function Onclick(){
+    let counter = document.body; //select the tag to be changed
+     counter.style.backgroundColor =  randomColorGenerator(); //"blue"
+    //document.body.style.backgroundColor = "green";
+}
+
+function randomColorGenerator(){
+    let colors ="#";
+    let colorPicker = "1234567890abcdef".split("");
+    for(let i = 0 ; i < 6; i++){
+        let index = (Math.floor(Math.random()*15));
+        colors = colors + colorPicker[index] ;
+
+    }
+    return colors;
+}
+
+
+
+//add event to target
+change.addEventListener('click',Onclick);

assignments/events/3. randomQuotes/index.html

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

assignments/events/3. randomQuotes/main.js

@@ -2,6 +2,19 @@ var quotes;
 
 // Write your code here
 
+//target
+const change = document.querySelector("body");
+
+//callback function
+function quoteMaker(){
+  let quotereturn = document.body;
+    quotereturn.textContent = quotePicker();
+
+    return quotereturn;
+}
+
+function quotePicker(){
+
 
 
 quotes = [
@@ -314,3 +327,16 @@ quotes = [
         "quoteText": "Great talent finds happiness in execution."
     }
 ];
+
+
+
+
+let index =  Math.floor(Math.random()*(quotes.length-1));
+
+    return quotes[index].quoteAuthor +':'+ quotes[index].quoteText;
+
+}
+
+
+//adding event
+change.addEventListener('keydown',quoteMaker);

assignments/events/4. mouseMove/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mouse Move</title>
+    <style>
+        .div{
+            max-width:90%;
+            border:5px solid green;
+            height:700px;
+            margin:auto;
+        }
+    </style>
+</head>
+<body>
+    <div class = "div">
+        <h1>Mouse Move Cursor</h1>
+
+    </div>
+    <script>
+        //target 
+        const change = document.querySelector(".div");
+        function cursorPosition(event){
+             (event.clientX);
+        }
+       change.addEventListener('mousemove',cursorPosition)
+    </script>
+</body>
+</html>