dom:chores

Author: MontessoriVisualization

getStarted/js/dropdown.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>DOM Manipulation</title>
+    <style>
+      .bro {
+        display: none;
+      }
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #494949;
+        color: white;
+      }
+      .main,
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      button {
+        padding: 10px 20px;
+        font-size: 16px;
+        margin-top: 20px;
+        cursor: pointer;
+      }
+      .text {
+        font-size: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <div class="text">THis is the main text</div>
+      <button>Hide</button>
+
+      
+    </div>
+  </body>
+  <script>
+    const buttons = document.querySelector("button");
+    const text = document.querySelector(".text");
+
+    buttons.addEventListener("click", () => {
+      text.classList.toggle("bro");
+      if (text.classList.contains("bro")) {
+        buttons.textContent = "show";
+      } else {
+        buttons.textContent = "hide";
+      }
+    });
+  </script>
+</html>

getStarted/js/reduce-map-forEach.js

@@ -44,6 +44,12 @@ const userNames = letslearnUsersObject.filter(function(user){
 }).reduce(function(acc,user){
     return acc + user
 },0)
+
+
+
+
+
+
 console.log(userNames)
 // const userNamesFor = [];
 // function getUserNames(users){

getStarted/jsAdvance/dom.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .btn{
+            padding: 10px 20px;
+            font-size: 1.1em;
+            color:white;
+            background-color: #007BFF;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <button class="btn"  >Click Me</button>
+<div>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, repellendus quasi!
+</div>
+<div class="second">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, repellendus quasi!
+</div>
+<div>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, repellendus quasi!
+</div>
+<div>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, repellendus quasi!
+</div>
+
+</body>
+<script>
+    //dom (Documnet object model ) ever element is an object in js
+    //we can manipulate the element using js
+    const btn = document.querySelector(".btn");
+    // btn.addEventListener("work",function)
+    btn.addEventListener("click",handelClick);
+ function handelClick(){
+ if(btn.textContent === "Click Me"){
+       btn.style.backgroundColor = "green";
+    btn.textContent = "Clicked";
+ }
+ else{
+    btn.style.backgroundColor = "#007BFF";
+    btn.textContent = "Click Me";
+ }
+
+}
+ btn.addEventListener("mouseover",function(){
+    if(btn.textContent === "Clicked"){
+    }
+    else{
+        btn.style.backgroundColor = "red";
+    }
+ })
+ btn.addEventListener("mouseout",function(){
+    if(btn.textContent === "Click me"){
+
+        btn.style.backgroundColor = "#007BFF";
+    }
+ })
+
+
+//click ,hover ,mouseout ,keydown ,
+
+  
+
+
+
+
+</script>
+
+</html>

getStarted/task/task2.txt

@@ -7,6 +7,7 @@ Instructions for Students:
 Setup the Inventory (Array of Objects):
 
 Create an empty array called inventory.
+
 Create a function called createProduct(name, price, quantity).
 This function should return an object with those three properties.
 Call this function three times to create these items and add them to your inventory array: