readme added

Shaw145 · Apr 28, 2024 · 0993362 · 0993362
1 parent 055be9d
commit 0993362
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 44 deletions.
diff --git 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());
 })
diff --git a/images/demo.png b/images/demo.png
diff --git a/index.html b/index.html
@@ -15,6 +15,8 @@
         <div class="loader"></div>
     </div>
 
+    <div id="taskloader">
+        <div class="custom-loader"></div></div>
 
     <img src="" alt="" id="city-img">
 

diff --git a/readme.md b/readme.md
@@ -0,0 +1,40 @@
+# Weather App Project
+
+![Weather App Demo](images/demo.png)
+
+## 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
@@ -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
+    }
+  }