Day 41: Assingment and Events

edyoda · Nov 27, 2022 · 576a33b · 576a33b
1 parent 3061954
commit 576a33b
Show file tree

Hide file tree

Showing 8 changed files with 548 additions and 1 deletion.
diff --git a/javascript/Day40/index.js b/javascript/Day40/index.js
@@ -57,7 +57,10 @@ console.log(`Hello ${x} ${y}`)
 const person = {
     name: 'Sara',
     age: 25,
-    gender: 'female'    
+    gender: 'female',
+    address:{
+        city:'Agra'
+    }
 }
 
 const name = "Utkarsh";

diff --git a/javascript/Day41/face/index.html b/javascript/Day41/face/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Face</title>
+    <link href="./style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <article>
+      <div class="eye left-eye">
+        <div class="eye-ball"></div>
+      </div>
+      <div class="eye right-eye">
+        <div class="eye-ball"></div>
+      </div>
+      <div class="mouth"></div>
+    </article>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/javascript/Day41/face/script.js b/javascript/Day41/face/script.js
@@ -0,0 +1,45 @@
+const body = document.querySelector("body");
+body.addEventListener("mousemove", getCursorPosition);
+
+function getCursorPosition(event) {
+  handleEyes(event);
+  handleMouth(event);
+}
+
+function handleEyes(event) {
+  const eyeballs = document.querySelectorAll(".eye-ball");
+  eyeballs.forEach(function (eye) {
+    let eyeX = eye.getBoundingClientRect().left + eye.clientWidth / 2;
+    let eyeY = eye.getBoundingClientRect().top + eye.clientHeight / 2;
+    var x = event.clientX;
+    var y = event.clientY;
+    let posX = x - eyeX;
+    let posY = y - eyeY;
+
+    if (posX > 0) {
+      eye.style.left = `${Math.min(8, posX)}px`;
+    }
+    if (posX <= 0) {
+      eye.style.left = `${Math.max(-8, posX)}px`;
+    }
+    if (posY > 0) {
+      eye.style.top = `${Math.min(8, posY)}px`;
+    }
+    if (posY <= 0) {
+      eye.style.top = `${Math.max(-8, posY)}px`;
+    }
+  });
+}
+
+function handleMouth(event) {
+  const mouth = document.querySelector(".mouth");
+  let mouthY = mouth.getBoundingClientRect().top + mouth.clientHeight / 2;
+  let posY = event.clientY - mouthY;
+  if (posY > 15) {
+    mouth.style.borderBottomColor = "red";
+    mouth.style.borderTopColor = "transparent";
+  } else {
+    mouth.style.borderTopColor = "orange";
+    mouth.style.borderBottomColor = "transparent";
+  }
+}
diff --git a/javascript/Day41/face/style.css b/javascript/Day41/face/style.css
@@ -0,0 +1,67 @@
+body {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+}
+article {
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
+  border: 2px solid gray;
+  position: relative;
+}
+
+.eye {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  border: 1px solid gray;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.left-eye {
+  top: 25%;
+  left: 20%;
+}
+.right-eye {
+  top: 25%;
+  right: 20%;
+}
+
+.eye-ball {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background-color: brown;
+  position: relative;
+}
+
+.eye-ball::after {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: black;
+  border-radius: 50%;
+  top: 3px;
+  left: 3px;
+}
+.mouth {
+  position: absolute;
+  width: 75px;
+  height: 20px;
+  z-index: 6;
+  border: 4px solid orange;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  bottom: 25%;
+  left: 30%;
+  transform: rotateX(180deg);
+  border-radius: 100%;
+}
diff --git a/javascript/Day41/index.html b/javascript/Day41/index.html
@@ -0,0 +1,22 @@
+<!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>Shoplane</title>
+    <link href="./style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <h1>Welcome to Shoplane</h1>
+    <section id="clothing" class="container">
+      <p>Clothing for Men and Women</p>
+      <div class="products-list"></div>
+    </section>
+    <section id="accesories" class="container">
+      <p>Accessories for Men and Women</p>
+      <div class="products-list"></div>
+    </section>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/javascript/Day41/product.html b/javascript/Day41/product.html
@@ -0,0 +1,31 @@
+<!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">
+    <link rel="stylesheet" href="./style.css" />
+    <title>Shoplane | Product</title>
+</head>
+<body>
+    <h1>Product</h1>
+    <div id="product-container" class="show">
+        <img  src="" class="product-preview"/>
+        <p class="product-title"></p>
+        <p class="product-description"></p>
+        <p class="product-brand"></p>
+        <p class="product-price"></p>
+        <div class="product-gallery">
+
+        </div>
+    </div>
+    <div id="product-not-found" class="hide">
+        <h2>Product not found</h2>
+        <a href="./index.html"> Go to Home Page</a>
+    </div>
+    <button id="add-to-cart-btn" class="hide">
+        Add to cart
+    </button>
+    <script src="./script.js"></script>
+</body>
+</html>