day 8 Event in js

nilajcoder · nilajcoder · commit 186c88b745bb · 2023-11-26T14:00:10.000+05:30
diff --git a/Chapter 8 Events.docx b/Chapter 8 Events.docx
diff --git a/Events/index.html b/Events/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Event in Js</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+    <button onclick="console.log('button was click');alert('hello')">click me !</button>
+    <button ondblclick="console.log('button was click 2 times');">click me 2 times  !</button>
+    <div onmouseover="console.log('you are inside the box')">this is div box</div>
+   <button id="btn1">click btn1..!</button>
+   <button id="btn2">click btn2..!</button>
+   
+   <div1>This is Box 2</div1>
+
+    <script src="scripts.js"></script>
+</body>
+
+</html>
diff --git a/Events/practice.html b/Events/practice.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Practice Event in Js</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+    <button id="mode"> Change Mode</button>
+
+    <p> Welcome Change mode Event Listner</p>
+   
+    <script src="practice.js"></script> 
+</body>
+</html>
diff --git a/Events/practice.js b/Events/practice.js
@@ -0,0 +1,18 @@
+let modeBtn=document.querySelector("#mode");
+let body=document.querySelector("body");
+let curmode="light"//black
+
+modeBtn.addEventListener("click",()=>{
+    if(curmode==="light"){
+        curmode="dark";
+        body.classList.add("dark");
+        body.classList.remove("light");
+    }else{
+        curmode="light";
+        body.classList.add("light");
+        body.classList.remove("dark");
+    }
+    console.log(curmode);
+
+})
+
diff --git a/Events/scripts.js b/Events/scripts.js
@@ -0,0 +1,44 @@
+let btn1=document.querySelector("#btn1");
+btn1.onclick=()=>{
+    console.log("btn1 was clicked");
+    let a=25;
+    a++;
+    console.log(a);
+}
+
+let div1=document.querySelector("div1");
+
+div1.onmouseover=()=>{
+
+    console.log("You are inside box 2");
+
+
+}
+
+
+//let btn2=document.querySelector("#btn2");
+//btn2.onclick=(evt)=>{
+   // console.log(evt);//event object
+   // console.log(evt.type);
+   // console.log(evt.target);
+    
+   
+//}
+
+btn2.addEventListener("click",()=>{
+    console.log("Button 2 was clicked - 1");
+
+});
+
+btn2.addEventListener("click",()=>{
+    console.log("Button 2 was clicked - 2");
+
+});
+
+const hand3=()=>{
+    console.log("Button 2 was clicked - 3");
+
+};
+
+btn2.addEventListener("click",hand3);
+btn2.removeEventListener("click",hand3);
diff --git a/Events/style.css b/Events/style.css
@@ -0,0 +1,10 @@
+.dark{
+    background-color: black;
+    color: white;
+}
+
+
+.light{
+    background-color: white;
+    color: black;
+}
