diff --git a/app.js b/app.js
index 373154d..0f6ffd6 100644
--- a/app.js
+++ b/app.js
@@ -33,66 +33,71 @@ async function checkWeather(city){
document.getElementById("city-img").src = "images/weather.jpg";
}
else{
+ setTimeout(()=>{
+ updateData(data);
+ },100)
+ }
+}
+
+async function updateData(data){
+
+ //Update the weather data
+ document.querySelector("#city").textContent = data.name;
+ document.querySelector("#temp").textContent = Math.round(data.main.temp) +"°c";
+ document.querySelector(".humidity").textContent = data.main.humidity + '%';
+ document.querySelector(".wind").textContent = data.wind.speed + "Km/h";
- await generateImage(city);
-
- //Update the weather data
- document.querySelector("#city").textContent = data.name;
- document.querySelector("#temp").textContent = Math.round(data.main.temp) +"°c";
- document.querySelector(".humidity").textContent = data.main.humidity + '%';
- document.querySelector(".wind").textContent = data.wind.speed + "Km/h";
-
-
- //Change the Weather Icon
- const weatherCondition = data.weather[0].main;
-
- if(weatherCondition == 'Clear'){
- weatherIcon.src = "images/clear.png"
- document.querySelector("#condition").textContent = data.weather[0].main;
- }
- else if(weatherCondition == 'Clouds'){
- weatherIcon.src = "images/clouds.png"
- document.querySelector("#condition").textContent = data.weather[0].main;
- }
- else if(weatherCondition == 'Haze'){
- weatherIcon.src = "images/drizzle.png"
- document.querySelector("#condition").textContent = data.weather[0].main;
- }
- else if(weatherCondition == 'Mist'){
- weatherIcon.src = "images/mist.png"
- document.querySelector("#condition").textContent = data.weather[0].main;
- }
- else if(weatherCondition == 'Rain'){
- weatherIcon.src = "images/rain.png"
- document.querySelector("#condition").textContent = data.weather[0].main;
- }
- else if(weatherCondition == 'Snow'){
- weatherIcon.src = "images/snow.png"
- document.querySelector("#condition").textContent = data.weather[0].main;
- }
-
- document.querySelector(".weather").style.display = "block";
- document.querySelector(".error").style.display = 'none';
+ //Change the Weather Icon
+ const weatherCondition = data.weather[0].main;
+
+ if(weatherCondition == 'Clear'){
+ weatherIcon.src = "images/clear.png"
+ document.querySelector("#condition").textContent = data.weather[0].main;
+ }
+ else if(weatherCondition == 'Clouds'){
+ weatherIcon.src = "images/clouds.png"
+ document.querySelector("#condition").textContent = data.weather[0].main;
+ }
+ else if(weatherCondition == 'Haze'){
+ weatherIcon.src = "images/drizzle.png"
+ document.querySelector("#condition").textContent = data.weather[0].main;
}
+ else if(weatherCondition == 'Mist'){
+ weatherIcon.src = "images/mist.png"
+ document.querySelector("#condition").textContent = data.weather[0].main;
+ }
+ else if(weatherCondition == 'Rain'){
+ weatherIcon.src = "images/rain.png"
+ document.querySelector("#condition").textContent = data.weather[0].main;
+ }
+ else if(weatherCondition == 'Snow'){
+ weatherIcon.src = "images/snow.png"
+ document.querySelector("#condition").textContent = data.weather[0].main;
+ }
+
+ document.querySelector(".weather").style.display = "block";
+ document.querySelector(".error").style.display = 'none';
}
//Default Call
checkWeather("kolkata");
+generateImage("kolkata")
//Image API call
async function generateImage(city){
-
- const response = await fetch(imageURL + city + `&client_id=${imageApiKey}`);
+ const response = await fetch(imageURL + city + `&client_id=${imageApiKey}`)
const data = await response.json();
- document.getElementById("city-img").src = data.results[0].urls.full;
+ const img = data.results[0].urls.full;
+ document.getElementById("city-img").src = img;
+
}
searchBtn.addEventListener('click', (e)=>{
-
- checkWeather(searchBox.value);
+ generateImage(searchBox.value.trim());
+ checkWeather(searchBox.value.trim());
})
\ No newline at end of file
diff --git a/images/demo.png b/images/demo.png
new file mode 100644
index 0000000..30ba025
Binary files /dev/null and b/images/demo.png differ
diff --git a/index.html b/index.html
index 7f71398..99b99a2 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,8 @@
+
![]()
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..91ec4d3
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,40 @@
+# Weather App Project
+
+
+
+## Overview
+
+This is a simple weather app project built using HTML, CSS, and JavaScript also fully Responsive. The app allows users to input a city and retrieves real-time weather data, including temperature, humidity, and wind speed, for that city. Additionally, the app displays dynamic city images that change with each search, enhancing the user experience.
+
+The project was developed as a beginner-level JavaScript project and serves as a practical application of basic web development concepts.
+
+## Features
+
+- Input field to enter the desired city
+- Real-time weather data retrieval using APIs
+- Display of temperature, humidity, and wind speed
+- Dynamic city images that change with each search
+
+## How to Use
+
+1. Clone the repository to your local machine.
+2. Open the `index.html` file in your web browser.
+3. Enter the name of the city you want to check the weather for in the input field.
+4. Press the "Search" button to retrieve weather data.
+
+## Technologies Used
+
+ - HTML
+ - CSS
+ - JavaScript
+
+## APIs Used
+
+- [OpenWeather API](https://openweathermap.org/api) for weather data retrieval.
+- [Unsplash API](https://unsplash.com/developers) for dynamic city images.
+
+## Credits
+
+- [**GreatStack**](https://www.youtube.com/@GreatStackDev)
+
+
diff --git a/style.css b/style.css
index 1177473..1c7bc13 100644
--- a/style.css
+++ b/style.css
@@ -75,6 +75,9 @@ html, body{
width: 20px;
}
+#search:hover{
+ background-color: #e6ebea;
+}
.error{
text-align: left;
@@ -315,3 +318,63 @@ html, body{
}
}
+ #taskloader{
+ background-color: transparent;
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ z-index: 100;
+ top: 50%;
+ left: 50%;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ display: none;
+}
+
+.custom-loader {
+ width: 70px;
+ height: 70px;
+ background: #ffa600;
+ border-radius: 50px;
+ -webkit-mask: radial-gradient(circle 31px at 50% calc(100% + 13px),#000 95%,#0000) top 4px left 50%,
+ radial-gradient(circle 31px,#000 95%,#0000) center,
+ radial-gradient(circle 31px at 50% -13px,#000 95%,#0000) bottom 4px left 50%,
+ linear-gradient(#000 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ -webkit-mask-repeat: no-repeat;
+ animation: cu10 1.5s infinite;
+ }
+
+ @keyframes cu10 {
+ 0% {
+ -webkit-mask-size: 0 18px,0 18px,0 18px,auto
+ }
+
+ 16.67% {
+ -webkit-mask-size: 100% 18px,0 18px,0 18px,auto
+ }
+
+ 33.33% {
+ -webkit-mask-size: 100% 18px,100% 18px,0 18px,auto
+ }
+
+ 50% {
+ -webkit-mask-size: 100% 18px,100% 18px,100% 18px,auto
+ }
+
+ 66.67% {
+ -webkit-mask-size: 0 18px,100% 18px,100% 18px,auto
+ }
+
+ 83.33% {
+ -webkit-mask-size: 0 18px,0 18px,100% 18px,auto
+ }
+
+ 100% {
+ -webkit-mask-size: 0 18px,0 18px,0 18px,auto
+ }
+ }
\ No newline at end of file