AkankshaAI · AkankshaAI · Oct 5, 2023 · Oct 5, 2023
diff --git a/JS_Projects/Project_8[imges]/index.html b/JS_Projects/Project_8[imges]/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+
+    <div id="center">
+        <p>peaky🤘
+            <br>
+            blinders
+        </p>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+ <script src="index.js"></script>   
+</body>
+</html>
diff --git a/JS_Projects/Project_8[imges]/index.js b/JS_Projects/Project_8[imges]/index.js
@@ -0,0 +1,46 @@
+
+let mousedata = document.querySelector("#center")
+
+const throttleFunction=(func, delay)=>{
+
+  let prev = 0;
+  return (...args) => {
+    let now = new Date().getTime();
+    if(now - prev> delay){
+      prev = now;
+      return func(...args); 
+    }
+  }
+}
+
+mousedata.addEventListener("mousemove", throttleFunction((dets)=>{
+
+let div = document.createElement("div")
+div.classList.add('images')
+div.style.left = dets.x + "px"
+div.style.top = dets.y + "px"
+
+let img = document.createElement("img")
+img.setAttribute("src","https://i.pinimg.com/236x/0d/3e/34/0d3e34fd34f7cef1bf71f4b90e9afb75.jpg")
+div.appendChild(img)
+
+document.body.appendChild(div)
+
+gsap.to(img, {
+    y:"0",
+    ease:Power1,
+    duration:.6
+
+})
+gsap.to(img, {
+    y: "100%",
+    delay:.6,
+    ease:Power2
+})
+
+setTimeout(() => {
+    div.remove()
+}, 2000);
+
+},400));
+
diff --git a/JS_Projects/Project_8[imges]/style.css b/JS_Projects/Project_8[imges]/style.css
@@ -0,0 +1,51 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+#center {
+    /* background-color: salmon; */
+    border-radius: 12px;
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+   width: 60%;
+   height: 60%;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+#center p {
+    font-size: 9.5vw;
+    font-weight: 900;
+    text-transform: uppercase;
+    line-height: 8rem;
+    letter-spacing: 2vw;
+
+}
+
+
+.images {
+    position: absolute;
+    width: 200px;
+    height: 270px;
+    overflow: hidden;
+
+}
+
+.images img {
+    transform: translateY(100%);
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    background-position: center;
+    border-radius: 12px;
+    overflow: hidden;
+}
diff --git a/JS_Projects/Weather_App/assets/cloud.png b/JS_Projects/Weather_App/assets/cloud.png
diff --git a/JS_Projects/Weather_App/assets/favicon.ico b/JS_Projects/Weather_App/assets/favicon.ico
diff --git a/JS_Projects/Weather_App/assets/humidity.png b/JS_Projects/Weather_App/assets/humidity.png
diff --git a/JS_Projects/Weather_App/assets/image.jpg b/JS_Projects/Weather_App/assets/image.jpg
diff --git a/JS_Projects/Weather_App/assets/loading.gif b/JS_Projects/Weather_App/assets/loading.gif
diff --git a/JS_Projects/Weather_App/assets/location.png b/JS_Projects/Weather_App/assets/location.png
diff --git a/JS_Projects/Weather_App/assets/not-found.png b/JS_Projects/Weather_App/assets/not-found.png
diff --git a/JS_Projects/Weather_App/assets/page-not-found.jpg b/JS_Projects/Weather_App/assets/page-not-found.jpg
diff --git a/JS_Projects/Weather_App/assets/search.png b/JS_Projects/Weather_App/assets/search.png
diff --git a/JS_Projects/Weather_App/assets/wind.png b/JS_Projects/Weather_App/assets/wind.png
diff --git a/JS_Projects/Weather_App/index.html b/JS_Projects/Weather_App/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=League+Spartan&family=Poppins&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="wrapper">
+        <h1>{Weather App}</h1>
+
+        <div class="tab-container">
+            <p class="tab" data-userWeather>Your Weather</p>
+            <p class="tab" data-searchWeather>Seach Weather</p>
+        </div>
+
+        <div class="weather-conatiner">
+
+            <!-- grant location container -->
+
+            <div class="sub-container grant-location-container">
+
+                <img src="/assets/location.png" width="50" height="50" alt="kuch_bhi" loading="lazy">
+                <p>grant Location Access</p>
+                <p>
+                    < Allow Access to get weather Information.,>
+                </p>
+                <button class="btn" data-grantAccess>Grant Access</button>
+
+            </div>
+
+            <!-- search from  -->
+
+            <form class="form-container" data-searchFrom>
+
+                <input placeholder="Search for city...." data-searchInput>
+                <button class="secand_btn" type="submit">
+                    <img src="/assets/search.png" width="20" height="20" alt="">
+                </button>
+            </form>
+
+            <!-- loading screen container  -->
+            <div class="loading-container">
+                <img src="/assets/loading.gif" width="150" height="150" alt="">
+                <p>Loading.🔥</p>
+            </div>
+
+
+            <!-- show weather info  -->
+            <div id="page" class="user-info-container">
+                <div class="name">
+                    <p data-cityName></p>
+                    <img src="" alt="" data-countryIcon>
+                </div>
+                <!-- weather description  -->
+                <h3 data-weatherDesc></h3>
+                <!-- weather icon  -->
+                <img class="images" src="" alt="" data-weatherIcon>
+                <!-- temperature -->
+                <h4 data-temp></h4>
+
+
+                <!-- cards----perameters  -->
+
+                <div class="parameter-container">
+
+                    <!-- first------------->
+
+                    <div class="parameter">
+                        <img src="/assets/wind.png" alt="">
+                        <p>windspeed</p>
+                        <p data-windspeed></p>
+                    </div>
+
+                    <!-- secand ----------- -->
+                    <div class="parameter">
+                        <img src="/assets/humidity.png" alt="">
+                        <p>humidity</p>
+                        <p data-humidity></p>
+                    </div>
+
+                    <!-- thaeard  -->
+                    <div class="parameter">
+                        <img src="/assets/cloud.png" alt="">
+                        <p>Clouds</p>
+                        <p data-cloudiness></p>
+                    </div>
+
+                </div>
+
+            </div>
+
+
+
+        </div>
+        <div id="page404">
+            <img src="/assets/page-not-found.jpg" alt="">
+          </div>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+
+</html>