devleo10 · vkoushik15 · Apr 7, 2025 · Apr 7, 2025
diff --git a/images/Smoke_005.jpg b/images/Smoke_005.jpg
diff --git a/images/fog.zip b/images/fog.zip
diff --git a/images/gof.gif b/images/gof.gif
diff --git a/images/gof1.gif b/images/gof1.gif
diff --git a/images/rain.gif b/images/rain.gif
diff --git a/images/s1.gif b/images/s1.gif
diff --git a/images/s2.gif b/images/s2.gif
diff --git a/images/sun.gif b/images/sun.gif
diff --git a/images/sun1.gif b/images/sun1.gif
diff --git a/images/sun2.gif b/images/sun2.gif
diff --git a/images/sunrise.gif b/images/sunrise.gif
diff --git a/images/thunder.gif b/images/thunder.gif
diff --git a/index.html b/index.html
@@ -14,6 +14,9 @@
 </head>
 
 <body>
+  <div class="rain-overlay">
+    <img src="./images/a.gif" alt="raining" />
+  </div>
   <div class="sound"></div>
   <div class="audiobtns">
     <button id="Continuebutton">continue audio</button>

diff --git a/script.js b/script.js
@@ -8,6 +8,9 @@ const weather = {
   isCelsius: true,
 
   // Geolocation Weather Fetch
+
+
+
   fetchWeatherByCoords: function(lat, lon) {
     fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${this.apiKey}`)
       .then(response => response.json())
@@ -204,7 +207,8 @@ const weather = {
               audio.currentTime = 0;
           }
 
-          // Set correct audio source based on weather condition
+          // Set correct audio source based on weather condition 
+          let overlayImg = document.querySelector(".rain-overlay img")
           if (
             descriptionz.includes("clear sky") ||
             descriptionz.includes("few clouds") ||
@@ -213,25 +217,27 @@ const weather = {
             descriptionz.includes("overcast clouds")
         ) {
             audio.src = "./sounds/clearsky.mp3";
-            const sunnyImages = ["./images/sunny1.jpg", "./images/sunny2.jpg", "./images/sunny3.jpg"];
-            backgroundImage = sunnyImages[Math.floor(Math.random() * sunnyImages.length)];
+             const sunnyImages = ["./images/sunny1.jpg", "./images/sunny2.jpg", "./images/sunny3.jpg"];
+             backgroundImage = sunnyImages[Math.floor(Math.random() * sunnyImages.length)];
+             overlayImg.src = "./images/sun2.gif"
+
         } else if (
             descriptionz.includes("light rain") ||
             descriptionz.includes("moderate rain") ||
             descriptionz.includes("heavy rain") ||
             descriptionz.includes("shower rain") ||
             descriptionz.includes("drizzle")
         ) {
-          const rainyImages = ["./images/rain1.jpg", "./images/rain2.jpg", "./images/rain3.jpg"];
-            backgroundImage = rainyImages[Math.floor(Math.random() * sunnyImages.length)];
+           const rainyImages = ["./images/rain1.jpg", "./images/rain2.jpg", "./images/rain3.jpg"];
+             backgroundImage = rainyImages[Math.floor(Math.random() * rainyImages.length)];
             audio.src = "./sounds/rain-sound.mp3";
         } else if (
             descriptionz.includes("thunderstorm") ||
             descriptionz.includes("thunderstorm with rain") ||
             descriptionz.includes("thunderstorm with heavy rain")
         ) {
-          const thunderImages = ["./images/thunder1.jpg", "./images/thunder2.jpg"];
-            backgroundImage = thunderImages[Math.floor(Math.random() * sunnyImages.length)];
+           const thunderImages = ["./images/thunder1.jpg", "./images/thunder2.jpg"];
+             backgroundImage = thunderImages[Math.floor(Math.random() * thunderImages.length)];
             audio.src = "./sounds/rnt.mp3";
         } else if (
             descriptionz.includes("haze") ||
@@ -240,8 +246,8 @@ const weather = {
             descriptionz.includes("smoke") ||
             descriptionz.includes("dust")
         ) {
-          const fogImages = ["./images/fog1.jpg", "./images/fog2.jpg"];
-            backgroundImage = fogImages[Math.floor(Math.random() * sunnyImages.length)];
+           const fogImages = ["./images/fog1.jpg", "./images/fog2.jpg"];
+             backgroundImage = fogImages[Math.floor(Math.random() * fogImages.length)];
 
             audio.src = "./sounds/wind.mp3";
         } else {
@@ -605,5 +611,4 @@ document.querySelector(".geolocation-btn").addEventListener("click", () => {
   }
 });
 // Initially fetch weather data for the city "Kolkata" when the script is loaded
-weather.fetchWeather("Kolkata");
-weather.getalldata();
+weather.fetchWeather("Kolkata");
diff --git a/style.css b/style.css
@@ -24,8 +24,27 @@ body {
   overflow-y: auto; /* Allow scrolling if content overflows */
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5);
 }
+.rain-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 5; /* Make sure it's above the background but below your main UI */
+  pointer-events: none; /* So it doesn't block clicks */
+  opacity: 0.7; /* Adjust for subtlety */
+}
 
-.boxess, .cbox {
+.rain-overlay img {
+  mix-blend-mode: screen;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.box:hover {
+  transform: scale(1.02);
+}
+.boxess{
   display: flex;
   flex-direction: column;
   align-items: center;