Merge pull request #52 from AzharAli-github/main

AzharAli-github · web-flow · commit 7474b73e6991 · 2023-02-01T17:48:28.000+05:00
Main
diff --git a/JavaScript/Advance/DOM/9. DOM Event Listener/css/style.css b/JavaScript/Advance/DOM/9. DOM Event Listener/css/style.css
@@ -0,0 +1,10 @@
+h2 {
+    font-family: monospace;
+}
+
+div {
+    width: 300px;
+    height: 300px;
+    border: 1px solid black;
+    text-align: center;
+}
diff --git a/JavaScript/Advance/DOM/9. DOM Event Listener/images/js-logo.png b/JavaScript/Advance/DOM/9. DOM Event Listener/images/js-logo.png
diff --git a/JavaScript/Advance/DOM/9. DOM Event Listener/index.html b/JavaScript/Advance/DOM/9. DOM Event Listener/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOM Event Listner</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link src = "images/js-logo.png">
+</head>
+
+<body>
+    <h1>DOM Event Listener</h1>
+    <h2>Example One</h2>
+    <div id="exampleOne">
+        <h2>OnClict Event</h2>
+    </div>
+    <h2>Example Two</h2>
+    <div id="exampleTwo">
+        <h2>On Mouse Over</h2>
+    </div>
+    <h2>Example Three</h2>
+    <div id="exampleThree">
+        <h2>On Mouse Out</h2>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/9. DOM Event Listener/script.js b/JavaScript/Advance/DOM/9. DOM Event Listener/script.js
@@ -0,0 +1,34 @@
+// Example One
+let exampleOne = document.getElementById('exampleOne');
+
+exampleOne.addEventListener("click", () => {
+    exampleOne.style.backgroundColor = "Green";
+    exampleOne.style.color = "white";
+});
+
+
+// Example Two
+let exampleTwo = document.getElementById('exampleTwo');
+
+exampleTwo.addEventListener("mouseover", () => {
+    exampleTwo.style.backgroundColor = "Blue";
+    exampleTwo.style.color = "White";
+});
+exampleTwo.addEventListener("mouseout", () => {
+    exampleTwo.style.backgroundColor = "white";
+    exampleTwo.style.color = "Green"
+});
+
+// Example Three
+
+let exampleThree = document.getElementById('exampleThree');
+
+exampleThree.addEventListener("mouseover", () => {
+    exampleThree.style.backgroundColor = "purple";
+    exampleThree.style.Color = "white";
+})
+
+exampleThree.addEventListener("mouseout", () => {
+    exampleThree.style.backgroundColor = "white";
+    exampleThree.style.color = "purple";
+})
