├── 09!!!.jpg ├── README.md ├── cover01.JPG ├── index.html ├── script.js └── style.css /09!!!.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kateFrontend/js-weather-app/5b1afe8793818e5bd7c7a2b0cb7f60dd11a0fb23/09!!!.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

Weather app

3 | Weather app 4 |
5 | 6 | 7 | ## About The Project 8 |

JavaScript Weather application with API from https://openweathermap.org/ and unsplash API for changing pictures.

9 |

Weather application is an excellent project which helps to understand the core basics of the DOM and teaches how to use fetch API, to call and get data from a third-party service.

10 | 11 |

12 | View Demo Here 13 |

14 | 15 | ## Built With 16 | 17 | [HTML5](https://www.w3schools.com/html/) / [CSS3](https://www.w3schools.com/css/) / [JavaScript](https://www.w3schools.com/js/) 18 | 19 | 20 | ## Usage 21 | 22 |

You need to create an account here https://openweathermap.org/ and get your API KEY.

23 |

In this project you will be able to know the temperature, sky condition, wind speed, humidity etc. When you input the name of any city in the input line, you will get all the information you need about the weather conditions in your city.

24 |

Using unsplash API, it finds a random photo of the searching city.

25 |

Application is responsive for all mobile devices.

26 |

Inspired by Jonah Lawrence tutorial.

27 | 28 | Project Link: https://github.com/kateFrontend/Weather-app 29 | -------------------------------------------------------------------------------- /cover01.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kateFrontend/js-weather-app/5b1afe8793818e5bd7c7a2b0cb7f60dd11a0fb23/cover01.JPG -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 | 20 | 21 |
22 | 23 |
24 |
25 |

26 |
27 |

28 |
29 |
30 | 31 |
32 |
33 | 34 | 35 | 36 |
    37 |
  • 38 | Feels like 39 | 30° 40 |
    • 41 |
  • 42 | Variation 43 | Min: 25° Max: 28° 44 |
    • 45 |
  • 46 | Conditions 47 | Sunny 48 |
    • 49 |
  • 50 | Cloudy 51 | 89% 52 |
    • 53 |
  • 54 | Humidity 55 | 64% 56 |
    • 57 |
  • 58 | Wind 59 | 8 km/h 60 |
    • 61 |
62 |
63 |
64 | 65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const api = { 2 | endpoint: "https://api.openweathermap.org/data/2.5/", 3 | key: "..." 4 | } 5 | 6 | 7 | const input = document.querySelector("#input"); 8 | input.addEventListener("keypress", enter); 9 | 10 | function enter(e) { 11 | if (e.keyCode === 13) { 12 | getInfo(input.value); 13 | } 14 | 15 | } 16 | 17 | async function getInfo(data) { 18 | const res = await fetch(`${api.endpoint}weather?q=${data}&units=metric&appID=${api.key}`); 19 | const result = await res.json(); 20 | 21 | displayResult(result); 22 | } 23 | 24 | 25 | function displayResult(result) { 26 | 27 | if(input.value === "") { 28 | Swal.fire({ 29 | icon: 'error', 30 | title: 'You must enter a city', 31 | text: 'Please, try again!', 32 | }) 33 | } 34 | 35 | const detailsBtn = document.querySelector(".details-btn"); 36 | detailsBtn.addEventListener("click", showDetails); 37 | 38 | function showDetails() { 39 | document.querySelector(".details").style.display = "block"; 40 | } 41 | 42 | let city = document.querySelector("#city"); 43 | city.textContent = `${result.name}, ${result.sys.country}`; 44 | 45 | let temperature = document.querySelector(".temp"); 46 | temperature.innerHTML = `${Math.round(result.main.temp)}°`; 47 | 48 | let icon = document.querySelector("#icon"); 49 | let iconId = `${result.weather[0].icon}`; 50 | icon.src = "http://openweathermap.org/img/wn/" + iconId + ".png"; 51 | 52 | let feelsLike = document.querySelector("#feelsLike"); 53 | feelsLike.innerHTML = `${Math.round(result.main.feels_like)}°`; 54 | 55 | let variation = document.querySelector("#variation"); 56 | variation.innerHTML = `Min: ${Math.round(result.main.temp_max)}° Max: ${Math.round(result.main.feels_like)}°` 57 | 58 | let cloudy = document.querySelector(".cloud"); 59 | cloudy.innerHTML = `${Math.round(result.clouds.all)}%`; 60 | 61 | let humidity = document.querySelector(".humidity"); 62 | humidity.innerHTML = `${Math.round(result.main.humidity)}%`; 63 | 64 | let wind = document.querySelector(".wind"); 65 | wind.innerHTML = `${Math.round(result.wind.speed)} km/h`; 66 | 67 | let conditions = document.querySelector(".conditions"); 68 | conditions.textContent = `${result.weather[0].main}`; 69 | 70 | document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + result.name + "')" 71 | 72 | } 73 | 74 | document.querySelector(".btn").addEventListener("click", function() { 75 | getInfo(input.value); 76 | 77 | }) 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | display: flex; 9 | justify-content: center; 10 | align-items:center; 11 | height: 100vh; 12 | background-image: url("https://source.unsplash.com/1600x900/?nature,water"); 13 | background-repeat: no-repeat; 14 | background-size: cover; 15 | font-family: 'Open Sans', sans-serif; 16 | font-size: 100%; 17 | } 18 | 19 | .weather-app { 20 | width: 100%; 21 | max-width: 570px; 22 | padding: 3em; 23 | color: white; 24 | border-radius: 15px; 25 | background: rgba(0,0,0,0.6); 26 | backdrop-filter: blur(5px); 27 | -webkit-backdrop-filter: blur(10px); 28 | 29 | } 30 | 31 | 32 | .search { 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | padding: 1em 0; 37 | } 38 | 39 | .btn { 40 | margin: 0.5em; 41 | border-radius: 50%; 42 | border: none; 43 | height: 44px; 44 | width: 44px; 45 | background: #b3b2b22b; 46 | color: white; 47 | cursor: pointer; 48 | transition: 0.2s ease-in-out; 49 | font-size: 90%; 50 | } 51 | 52 | .btn:hover { 53 | background: #edecec6b; 54 | } 55 | 56 | .details-btn { 57 | text-align: center; 58 | color: white; 59 | background: #cfcdcd2b; 60 | padding: 0.5em 2em; 61 | font-size: 1.2em; 62 | width: 100%; 63 | border-radius:24px; 64 | margin-top: 1em; 65 | } 66 | 67 | .details-btn:hover { 68 | background: #edecec6b; 69 | } 70 | 71 | input#input { 72 | border: none; 73 | outline: none; 74 | padding: 0.5em 1em; 75 | border-radius: 24px; 76 | 77 | color: black; 78 | font-family: inherit; 79 | font-size: 105%; 80 | width: calc(100% - 50px); 81 | } 82 | 83 | .container > div { 84 | display: flex; 85 | justify-content: center; 86 | align-items: center; 87 | } 88 | 89 | .temp { 90 | font-size: 5em; 91 | } 92 | 93 | .city-time { 94 | padding: 0 1em; 95 | } 96 | 97 | 98 | .details { 99 | margin-top: 2em; 100 | padding: 1em 0; 101 | border-top: 1px solid white; 102 | border-bottom: 1px solid white; 103 | display: none; 104 | } 105 | 106 | .details li{ 107 | list-style: none; 108 | display: flex; 109 | justify-content: space-between; 110 | margin: 1em 0; 111 | } 112 | 113 | 114 | @media all and (max-width: 900px) { 115 | 116 | body { 117 | height: 220vh; 118 | } 119 | 120 | } 121 | 122 | @media all and (max-width: 500px) { 123 | 124 | body { 125 | height: 100vh; 126 | } 127 | 128 | .weather-app { 129 | width: 95%; 130 | padding: 2em; 131 | } 132 | 133 | .city-time { 134 | font-size: 0.7em; 135 | } 136 | 137 | .temp { 138 | font-size: 3em; 139 | } 140 | 141 | } 142 | 143 | 144 | @media all and (max-width: 330px) { 145 | .temp { 146 | font-size: 2em; 147 | } 148 | 149 | .name { 150 | font-size: 1.3em; 151 | } 152 | 153 | .details-title { 154 | font-size: 1em; 155 | 156 | } 157 | 158 | .details { 159 | font-size: 0.8em; 160 | } 161 | 162 | } 163 | 164 | 165 | --------------------------------------------------------------------------------