diff --git a/images/Smoke_005.jpg b/images/Smoke_005.jpg
new file mode 100644
index 0000000..11ff576
Binary files /dev/null and b/images/Smoke_005.jpg differ
diff --git a/images/fog.zip b/images/fog.zip
new file mode 100644
index 0000000..3672142
Binary files /dev/null and b/images/fog.zip differ
diff --git a/images/gof.gif b/images/gof.gif
new file mode 100644
index 0000000..b0f773a
Binary files /dev/null and b/images/gof.gif differ
diff --git a/images/gof1.gif b/images/gof1.gif
new file mode 100644
index 0000000..b7874e0
Binary files /dev/null and b/images/gof1.gif differ
diff --git a/images/rain.gif b/images/rain.gif
new file mode 100644
index 0000000..565bd19
Binary files /dev/null and b/images/rain.gif differ
diff --git a/images/s1.gif b/images/s1.gif
new file mode 100644
index 0000000..8c15bc6
Binary files /dev/null and b/images/s1.gif differ
diff --git a/images/s2.gif b/images/s2.gif
new file mode 100644
index 0000000..84fc312
Binary files /dev/null and b/images/s2.gif differ
diff --git a/images/sun.gif b/images/sun.gif
new file mode 100644
index 0000000..09505b3
Binary files /dev/null and b/images/sun.gif differ
diff --git a/images/sun1.gif b/images/sun1.gif
new file mode 100644
index 0000000..7c381c1
Binary files /dev/null and b/images/sun1.gif differ
diff --git a/images/sun2.gif b/images/sun2.gif
new file mode 100644
index 0000000..b370d7a
Binary files /dev/null and b/images/sun2.gif differ
diff --git a/images/sunrise.gif b/images/sunrise.gif
new file mode 100644
index 0000000..f1e9eea
Binary files /dev/null and b/images/sunrise.gif differ
diff --git a/images/thunder.gif b/images/thunder.gif
new file mode 100644
index 0000000..1f2d4c1
Binary files /dev/null and b/images/thunder.gif differ
diff --git a/index.html b/index.html
index 1a89a6b..1ffec17 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,9 @@
+
+
+
diff --git a/script.js b/script.js
index f02215d..a4e0d7f 100644
--- 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,8 +217,10 @@ 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") ||
@@ -222,16 +228,16 @@ const weather = {
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");
\ No newline at end of file
diff --git a/style.css b/style.css
index 4ddb0a1..eeda837 100644
--- 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;