Merge pull request Kushal997-das#1248 from sristy17/main

Updated Web Dev Project (Weather App)
ParnaRoyChowdhury777 · Jul 6, 2024 · df9c2d5 · df9c2d5
2 parents 99391de + 6e8cbed
commit df9c2d5
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 8 deletions.
diff --git a/Web Development/Basic/Weather App/Icons/pine-watt-2Hzmz15wGik-unsplash.jpg b/Web Development/Basic/Weather App/Icons/pine-watt-2Hzmz15wGik-unsplash.jpg
diff --git a/Web Development/Basic/Weather App/Icons/screenshot.png b/Web Development/Basic/Weather App/Icons/screenshot.png
diff --git a/Web Development/Basic/Weather App/README.md b/Web Development/Basic/Weather App/README.md
@@ -1,15 +1,16 @@
 ___
 ### Weather App - JS, HTML, CSS
 A simple weather app created using HTML, CSS and JavaScript. 
-you can View a demo [here](https://admiralanne-js-weather.netlify.app/).
+you can View a demo [here](https://candid-chaja-3edac3.netlify.app/).
 
 ___
 ### Screenshot ~
 >Insert City Name in search Box ~ 
 
-![alt text for screen readers](https://icecube-eu-307.icedrive.io/thumbnail?p=UJ73KQ5YgMuJl6.UZ6bvQDKpgc8S_WGF57WtXw47Zg7PhJdNgSD1QTDG6rxid3oe.kNd7z9_bfIKMpC1a3Og3fK6OJ6HgLglYnv45wJ0oWp4iN3IHlDyCn8p0gt2ur_h&w=1024&h=1024&m=cropped)
+![screenshot](./images/Screenshot%20from%202024-06-28%2015-51-33.png)
+![screenshot](./images/Screenshot%20from%202024-06-28%2015-51-45.png)
 ___
 ### Tools used :
 * VS code
 * HTML aand CSS
-* vanilla Javascript
+* vanilla Javascript
diff --git a/Web Development/Basic/Weather App/app.js b/Web Development/Basic/Weather App/app.js
@@ -19,20 +19,36 @@ let weather = {
     displayWeather: function (data) {
       const { name } = data;
       const { icon, description } = data.weather[0];
-      const { temp, humidity } = data.main;
+      const { temp, humidity, temp_min, temp_max, feels_like} = data.main;
       const { speed } = data.wind;
       document.querySelector(".city").innerText = "Weather in " + name;
       document.querySelector(".icon").src =
         "https://openweathermap.org/img/wn/" + icon + ".png";
       document.querySelector(".description").innerText = description;
       document.querySelector(".temp").innerText = temp + "°C";
+      document.querySelector(".feels-like").innerText =
+    "Feels like: " + feels_like + "°C";
+      document.querySelector(".min-temp").innerText = "Min Temp: " + temp_min + "°C"; 
+      document.querySelector(".max-temp").innerText = "Max Temp: " + temp_max + "°C"; 
       document.querySelector(".humidity").innerText =
         "Humidity: " + humidity + "%";
       document.querySelector(".wind").innerText =
         "Wind speed: " + speed + " km/h";
-      document.querySelector(".weather").classList.remove("loading");
-      document.body.style.backgroundImage =
-        "url('https://source.unsplash.com/1600x900/?" + name + "')";
+
+
+      let backgroundImageUrl;
+  if (temp < 0) {
+    backgroundImageUrl = "https://plus.unsplash.com/premium_photo-1671462679356-15ed7a622434?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y29sZHxlbnwwfHwwfHx8MA%3D%3D"; 
+  } else if (temp >= 0 && temp < 15) {
+    backgroundImageUrl = "https://images.unsplash.com/photo-1579785626308-1ba70c1dd789?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjR8fGNvbGR8ZW58MHx8MHx8fDA%3D";
+  } else if (temp >= 15 && temp < 28) {
+    backgroundImageUrl = "https://images.unsplash.com/photo-1561484930-998b6a7b22e8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fG1pbGQlMjB3ZWF0aGVyfGVufDB8fDB8fHww"; 
+  } else {
+    backgroundImageUrl = "https://images.unsplash.com/photo-1577985759186-0854dfd3f218?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGhvdCUyMHdlYXRoZXJ8ZW58MHx8MHx8fDA%3D"; 
+  }
+
+  document.body.style.backgroundImage = `url('${backgroundImageUrl}')`;
+  document.querySelector(".weather").classList.remove("loading");
     },
     search: function () {
       this.fetchWeather(document.querySelector(".search-bar").value);

diff --git a/Web Development/Basic/Weather App/images/Screenshot from 2024-06-28 15-51-33.png b/Web Development/Basic/Weather App/images/Screenshot from 2024-06-28 15-51-33.png
diff --git a/Web Development/Basic/Weather App/images/Screenshot from 2024-06-28 15-51-45.png b/Web Development/Basic/Weather App/images/Screenshot from 2024-06-28 15-51-45.png
diff --git a/Web Development/Basic/Weather App/index.html b/Web Development/Basic/Weather App/index.html
@@ -31,6 +31,9 @@ <h1 class="temp">51°C</h1>
       </div>
       <div class="humidity">Humidity: 60%</div>
       <div class="wind">Wind speed: 6.2 km/h</div>
+      <div class="feels-like">Feels like: 48°C</div>
+      <div class="min-temp">Min Temp: 45°C</div>
+      <div class="max-temp">Max Temp: 55°C</div>
     </div>
   </div>
 </body>

diff --git a/Web Development/Basic/Weather App/style.css b/Web Development/Basic/Weather App/style.css
@@ -7,7 +7,8 @@ body {
     margin: 0;
     font-family: 'Open Sans', sans-serif;
     background: #222;
-    background-image: url(./Icons/pine-watt-2Hzmz15wGik-unsplash.jpg);
+    background-size: cover;
+    background-position: center;
     font-size: 120%;
   }