JS Added

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

Hide file tree

Showing 5 changed files with 218 additions and 7 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,98 @@
+const searchBox = document.querySelector(".search-box input");
+const searchBtn = document.querySelector("#search");
+const weatherIcon = document.querySelector(".weather-icon");
+
+
+const weatherApiKey = 'b2fa3271ab55c9c76e1b2a2d1afd0478';
+const weatherURL = `https://api.openweathermap.org/data/2.5/weather?units=metric&q=`;
+
+
+
+const imageApiKey ="2BsfBnNAfcAGF3oX4F_fRIlYnOXYBGYyJpeHfo8AWp4";
+const imageURL = "https://api.unsplash.com/search/photos?page=1&query=";
+
+
+
+
+window.addEventListener('load', ()=>{
+    setTimeout(()=>{
+        document.querySelector("#preloader").style.display = "none";
+    },1500)
+})
+
+
+//Weather API call
+async function checkWeather(city){
+    const response = await fetch(weatherURL + city + `&appid=${weatherApiKey}`);
+    const data = await response.json();
+
+
+    if(response.status === 404){
+        document.querySelector(".error").style.display = 'block';
+        document.querySelector(".weather").style.display = "none";
+        document.getElementById("city-img").src = "images/weather.jpg";
+    }
+    else{
+
+        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';
+
+    }
+}
+
+//Default Call
+checkWeather("kolkata");
+
+
+//Image API call
+async function generateImage(city){
+
+    const response = await fetch(imageURL + city + `&client_id=${imageApiKey}`);
+    const data = await response.json();
+
+    document.getElementById("city-img").src = data.results[0].urls.full;
+
+}
+
+
+searchBtn.addEventListener('click', (e)=>{
+
+    checkWeather(searchBox.value);
+})
diff --git a/images/kolkata.jpg b/images/kolkata.jpg
diff --git a/images/weather.jpg b/images/weather.jpg
diff --git a/index.html b/index.html
@@ -9,33 +9,45 @@
     <script src="app.js" defer></script>
 </head>
 <body>
-    <img src="images/kolkata.jpg" alt="" id="city-img">
+
+    <!-- Preloader -->
+    <div id="preloader">
+        <div class="loader"></div>
+    </div>
+
+
+    <img src="" alt="" id="city-img">
+
     <div class="app-container">
         <div class="search-box">
             <input type="text" name="city" id="city-input" placeholder="Enter City Name" spellcheck="false">
             <button id="search"><img src="images/search.png" alt=""></button>
         </div>
+        <div class="error">
+            <p>Invalid City Name</p>
+        </div>
 
         <div class="weather">
-            <img src="images/snow.png" alt="">
+            <img src="images/clear.png" alt="" class="weather-icon">
+            <p id="condition">Clear</p>
 
-            <h1 id="temp">22°c</h1>
+            <h1 id="temp"></h1>
             <h2 id="city">Kolkata</h2>
 
             <div class="details">
                 <div class="col">
-                    <img src="images/humidity.png" alt="" class="weather-icon">
+                    <img src="images/humidity.png" alt="">
 
                     <div>
-                        <p class="humidity">50%</p>
+                        <p class="humidity"></p>
                         <p>Humidity</p>
                     </div>
                 </div>
                 <div class="col">
                     <img src="images/wind.png" alt="">
 
                     <div>
-                        <p class="wind">15 km/h</p>
+                        <p class="wind"></p>
                         <p>Wind Speed</p>
                     </div>
                 </div>

diff --git a/style.css b/style.css
@@ -75,11 +75,25 @@ html, body{
     width: 20px;
 }
 
+
+.error{
+    text-align: left;
+    margin-left: 14px;
+    margin-top: 10px;
+    display: none;
+}
+
+
 .weather-icon{
     width: 170px;
     margin-top: 30px;
 }
 
+#condition{
+    font-size: 17px;
+    font-weight: 600;
+}
+
 #temp{
     font-size: 80px;
     font-weight: 500;
@@ -187,6 +201,7 @@ html, body{
 
 @media screen and (max-height: 730px) {
     .app-container{
+        top: 7vh;
         height: 84vh;
         bottom: 20px;
     }
@@ -213,4 +228,90 @@ html, body{
     .col div:last-child{
         font-size: 1.5vh;
     }
-}
+}
+
+
+
+
+
+/* CSS for Preloader */
+
+/**************/
+#preloader{
+    background-color: #212121;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    z-index: 10;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.loader {
+    position: relative;
+    width: 120px;
+    height: 90px;
+    margin: 0 auto;
+  }
+
+  .loader:before {
+    content: "";
+    position: absolute;
+    bottom: 30px;
+    left: 50px;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    background: #2a9d8f;
+    animation: loading-bounce 0.5s ease-in-out infinite alternate;
+  }
+
+  .loader:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 7px;
+    width: 45px;
+    border-radius: 4px;
+    box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
+    animation: loading-step 1s ease-in-out infinite;
+  }
+
+  @keyframes loading-bounce {
+    0% {
+      transform: scale(1, 0.7);
+    }
+
+    40% {
+      transform: scale(0.8, 1.2);
+    }
+
+    60% {
+      transform: scale(1, 1);
+    }
+
+    100% {
+      bottom: 140px;
+    }
+  }
+
+  @keyframes loading-step {
+    0% {
+      box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
+              0 10px 0 #f2f2f2,
+              -35px 50px 0 #f2f2f2,
+              -70px 90px 0 #f2f2f2;
+    }
+
+    100% {
+      box-shadow: 0 10px 0 #f2f2f2,
+              -35px 50px 0 #f2f2f2,
+              -70px 90px 0 #f2f2f2,
+              -70px 90px 0 rgba(0, 0, 0, 0);
+    }
+  }
+