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 deleted file mode 100644 index d02e3c6dd..000000000 Binary files a/Web Development/Basic/Weather App/Icons/pine-watt-2Hzmz15wGik-unsplash.jpg and /dev/null differ diff --git a/Web Development/Basic/Weather App/Icons/screenshot.png b/Web Development/Basic/Weather App/Icons/screenshot.png deleted file mode 100644 index 00e9719d4..000000000 Binary files a/Web Development/Basic/Weather App/Icons/screenshot.png and /dev/null differ diff --git a/Web Development/Basic/Weather App/README.md b/Web Development/Basic/Weather App/README.md index 29317309f..58a81406e 100644 --- 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 \ No newline at end of file +* vanilla Javascript diff --git a/Web Development/Basic/Weather App/app.js b/Web Development/Basic/Weather App/app.js index b3076fa37..a0f54ddcb 100644 --- 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 new file mode 100644 index 000000000..eb673a94e Binary files /dev/null and b/Web Development/Basic/Weather App/images/Screenshot from 2024-06-28 15-51-33.png differ 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 new file mode 100644 index 000000000..cc1dfedcc Binary files /dev/null and b/Web Development/Basic/Weather App/images/Screenshot from 2024-06-28 15-51-45.png differ diff --git a/Web Development/Basic/Weather App/index.html b/Web Development/Basic/Weather App/index.html index 621457664..4b8cfeb14 100644 --- a/Web Development/Basic/Weather App/index.html +++ b/Web Development/Basic/Weather App/index.html @@ -31,6 +31,9 @@

51°C

Humidity: 60%
Wind speed: 6.2 km/h
+
Feels like: 48°C
+
Min Temp: 45°C
+
Max Temp: 55°C
diff --git a/Web Development/Basic/Weather App/style.css b/Web Development/Basic/Weather App/style.css index fda2b9a40..835a3d40c 100644 --- 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%; }