addWnetListener Example added

HadiVahidi20 · HadiVahidi20 · commit ea977e5bd9eb · 2025-09-29T20:33:04.000+01:00
diff --git a/Sprint-1/prep/Age/simpleExampleOfEventlistener.html b/Sprint-1/prep/Age/simpleExampleOfEventlistener.html
@@ -0,0 +1,86 @@
+<!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>Simple Example of Event Listener</title>
+    <style>
+           * {
+            box-sizing: border-box;
+            }
+
+        #container{
+            
+        
+            margin-top: 45vh;
+            border: 2px red solid;
+            display: flex ;
+            flex-direction:column;
+            gap: 20px;
+            justify-content: space-around;
+            padding: 20px;
+            align-items: center;
+
+        }
+        .btn_container{
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+            align-items: center; 
+        }
+        .btn_container :first-child{
+            color: red;
+        }
+        .btn_container :nth-child(2){
+            color: blue;
+        }
+        button{
+            width: 50%;
+            margin: auto;
+            background-color: azure;
+            border-radius: 10px;
+            width: 100px;
+            height: 50px;
+            font-size: larger;
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+<h1>Simple Example of Event Listener</h1>
+click the button to see the event listener in action:
+
+<div class="btn_container"> 
+<button id="btn-red">Red!</button>
+
+
+<button id="btn-blue">Blue</button>
+</div>
+
+</div>
+<script>
+    // Select the button element
+    const buttonRed= document.getElementById("btn-red");
+    const buttonBlue=document.getElementById("btn-blue");
+    const bg= document.getElementById("container");
+
+    // Add an event listener to the button
+    buttonRed.addEventListener("click", function() {
+      bg.style.backgroundColor = "red";
+    });
+     buttonBlue.addEventListener("click",function(){
+    bg.style.backgroundColor="blue"
+     })
+
+
+</script>
+</body>
+
+
+
+
+
+
+
+</html>
