all functionality added except yes function

sadaiprince · Feb 26, 2024 · 31b304a · 31b304a
1 parent d6a95aa
commit 31b304a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/valentineProject1/bg.png b/valentineProject1/bg.png
diff --git a/valentineProject1/index.html b/valentineProject1/index.html
@@ -12,30 +12,30 @@
 <body>
     <div class="container-fluid main">
         <div class="container wrapper">
-                <div class="container heading">
+
                     <h1>Do you like me?</h1>
-                </div>
-            <div class="container buttonSection">
+
+                <div class="buttonSection">
                 <button class="yes">Yes</button>
                 <button class="no">No</button>
-            </div>
+                </div>
         </div>
     </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let no=document.querySelector(".no");
         let yes=document.querySelector(".yes");
-    let ran=Math.random()*1000;
-    console.log(ran);
-
-        no.addEventListener('click', (ck)=>{
+        let parentBlock=no.parentElement;
+        no.addEventListener('mouseover', ()=>{
+            const positionX = Math.floor(Math.random() * (parentBlock.clientWidth - no.clientWidth));
+            console.log(positionX)
+            const positionY = Math.floor(Math.random() * (parentBlock.clientHeight - no.clientHeight));
+            console.log(positionY)
             no.style.position = "absolute";
-
-            no.style.left = ran+"px";
-            no.style.top = ran+ "px";
-
-            console.log(ck);
+            no.style.left=`${positionX}px`;
+            no.style.top=`${positionY}px`;
+
         })
 
     </script>

diff --git a/valentineProject1/style.css b/valentineProject1/style.css
@@ -2,24 +2,26 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    
+
     font-family: 'Times New Roman', Times, serif;
     font-weight: 600;
 }
 
 .main {
     width: 100vw;
     height: 100vh;
-    background-color: rgb(175, 123, 38);
+    background: url(bg.png);
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 
 }
 
 .wrapper {
     height: 90vh;
     width: 90vw;
+    position: relative;
     border-radius: 23px;
     background: rgba(255, 255, 255, 0.2);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@@ -36,17 +38,22 @@ h1 {
 }
 
 .buttonSection {
+    height: calc(90vh - 73px);
     display: flex;
     justify-content: center;
     align-items: center;
-    
+
 }
 
 button {
     margin: 4px;
     padding: 9px 25px;
     border-radius: 9px;
-    background-image: linear-gradient(red, yellow);
-    border: 2px solid rgba(252, 0, 135, 0.783);
+    background: rgba(134, 223, 144, 0.447);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.761);
     font-size: 1.1rem;
 }