DOM-Events

AzharAli-github · AzharAli-github · commit ce1c82bd5ff2 · 2023-01-31T02:25:35.000+05:00
diff --git a/JavaScript/Advance/DOM/8. DOM Events/css/style.css b/JavaScript/Advance/DOM/8. DOM Events/css/style.css
@@ -0,0 +1,13 @@
+h1 {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+h2 {
+    font-family: monospace;
+}
+
+h4 {
+    font-size: 40px;
+    width: 200px;
+    text-align: center;
+}
diff --git a/JavaScript/Advance/DOM/8. DOM Events/images/js-logo.png b/JavaScript/Advance/DOM/8. DOM Events/images/js-logo.png
diff --git a/JavaScript/Advance/DOM/8. DOM Events/index.html b/JavaScript/Advance/DOM/8. DOM Events/index.html
@@ -0,0 +1,27 @@
+<!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 Events</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <h1>DOM Events</h1>
+    <h2>Example One</h2>
+    <h3 onclick="DisplayOne()" id="textOne">Click on this text!</h3>
+    <h2>Example Two</h2>
+    <button onclick="DisplayTwo()">The Time is</button>
+    <p id="textTwo"></p>
+    <h2>Example Three</h2>
+    <button onclick="DisplayThree()">Click to see if Cookies are enabled or not</button>
+    <p id="textThree"></p>
+    <h2>Example Four</h2>
+    <h4 id="hover" onmouseover="DisplayFour()">Hove Me</h4>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/8. DOM Events/script.js b/JavaScript/Advance/DOM/8. DOM Events/script.js
@@ -0,0 +1,37 @@
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    textOne.innerHTML = "OOPs!";
+}
+
+let textTwo = document.getElementById('textTwo');
+
+function DisplayTwo() {
+    textTwo.innerHTML = new Date();
+}
+
+let textThree = document.getElementById('textThree');
+
+function DisplayThree() {
+    var text = "";
+    if (navigator.cookieEnabled == true) {
+        text = "Cookies are enabled.";
+    } else {
+        text = "Cookies are not enabled.";
+    }
+    textThree.innerHTML = text;
+}
+
+let hover = document.getElementById('hover');
+
+function DisplayFour() {
+    let x = true;
+    if (x == true) {
+        hover.style.backgroundColor = '#00FF00';
+        x = false;
+    } else {
+        hover.style.backgroundColor = 'white';
+        x = true;
+    }
+
+}
