q2 added

purusottam32 · Dec 8, 2024 · bbbcf36 · bbbcf36
1 parent 2055fc2
commit bbbcf36
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/ASSIGNMENT-3/Q1/q2.html b/ASSIGNMENT-3/Q1/q2.html
@@ -0,0 +1,58 @@
+    <!-- Write a jQuery program to perform the following actions on a <div> element: when the 
+    user clicks on the <div>, its text should change to 'Clicked!'; when the user double
+    clicks, the background color should change to orange; when the user hovers (mouse 
+    enters) over the <div>, the border color should change to green; and when the user 
+    moves the mouse away (mouse leaves), the border color should revert to black. The 
+    <div> should initially have a light blue background, a black border, and centered text.  -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Q 2</title>
+    <style>
+        div{
+            width: 200px;
+            height: 100px;
+            background-color: lightblue; /* Initial background color */
+            border: 2px solid black;     /* Initial border color */
+            color: black;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            margin: 50px auto; /* Centering the <div> */
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <script
+    src="https://code.jquery.com/jquery-3.7.1.js"
+    integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
+    crossorigin="anonymous"
+  ></script>
+
+<div>Hover , click or Double click me !!</div>
+
+<script>
+    $(document).ready(function(){
+        $('div').on('click',function() {
+            $(this).text("Clicked!")
+        })
+        $('div').on('mouseenter',function(){
+            $(this).css("border-color","green")
+        })
+        $('div').on('mouseleave',function(){
+            $(this).css("border-color","black")
+        })
+        $('div').on('dblclick',function(){
+            $(this).css("background-color","orange")
+        })
+    })
+</script>
+</body>
+</html>