├── LICENSE
├── README.md
├── css
├── palette.css
└── style.css
├── icons
├── Preview.png
├── black result.png
├── clear.svg
├── cloud.svg
├── favicon.svg
├── haze.svg
├── icon1.png
├── icon2.png
├── icon3.png
├── pink result.png
├── rain.svg
├── readme icon.png
├── snow.svg
├── storm.svg
├── theme.png
└── weather app.png
├── index.html
└── js
└── script.js
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Ashutosh Kumar
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 | 
5 | 
6 | [](https://twitter.com/intent/follow?screen_name=warrior_aashuu)
7 |
8 |
9 |
Weather State
10 |
11 | `Weather Web App to get the current weather state using the openweathermap API 🌐`
12 |
13 |
➥ Live Demo
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | `Don't forget to starred this repository ⭐`
22 |
23 |
5 |
12 |
15 |
24 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/icons/cloud.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/icons/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
10 |
11 |
12 |
14 |
15 |
18 |
19 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/icons/haze.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
10 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/icons/icon1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Weather-State/4b4d0a0841b901f45c758b74414f067e3113815c/icons/icon1.png
--------------------------------------------------------------------------------
/icons/icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Weather-State/4b4d0a0841b901f45c758b74414f067e3113815c/icons/icon2.png
--------------------------------------------------------------------------------
/icons/icon3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Weather-State/4b4d0a0841b901f45c758b74414f067e3113815c/icons/icon3.png
--------------------------------------------------------------------------------
/icons/pink result.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Weather-State/4b4d0a0841b901f45c758b74414f067e3113815c/icons/pink result.png
--------------------------------------------------------------------------------
/icons/rain.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
20 |
28 |
29 |
42 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/icons/readme icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Weather-State/4b4d0a0841b901f45c758b74414f067e3113815c/icons/readme icon.png
--------------------------------------------------------------------------------
/icons/snow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/icons/storm.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/icons/theme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Weather-State/4b4d0a0841b901f45c758b74414f067e3113815c/icons/theme.png
--------------------------------------------------------------------------------
/icons/weather app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Weather-State/4b4d0a0841b901f45c758b74414f067e3113815c/icons/weather app.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Weather State
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
32 |
33 |
35 | _
36 | ° C
37 |
38 | _ _
39 |
40 | _, _
42 |
43 |
44 |
45 |
46 |
47 |
48 | _
49 | ° C
50 |
51 |
Feels like
52 |
53 |
54 |
55 |
56 |
57 |
_
58 |
Humidity
59 |
60 |
61 |
62 |
63 |
64 |
_
65 |
Wind Speed
66 |
67 |
68 |
69 |
70 |
71 |
_
72 |
Date & Time
73 |
74 |
75 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
90 |
93 |
94 |
96 |
97 |
98 |
99 |
109 |
110 |
111 | Weather State By aashuu
112 |
113 |
114 |
115 |
116 |
137 |
138 |
139 |
140 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | const wrapper = document.querySelector(".wrapper"),
2 | inputPart = document.querySelector(".input-part"),
3 | infoTxt = inputPart.querySelector(".info-txt"),
4 | inputField = inputPart.querySelector("input"),
5 | locationBtn = inputPart.querySelector("button"),
6 | weatherPart = wrapper.querySelector(".weather-part"),
7 | forecastSection = wrapper.querySelector(".forecast"),
8 | forecastDetails = forecastSection.querySelector(".forecast-details"),
9 | wIcon = weatherPart.querySelector("img"),
10 | arrowBack = wrapper.querySelector("header i");
11 |
12 | let api;
13 | let apiKey = "b190a0605344cc4f3af08d0dd473dd25";
14 |
15 | const weatherChartCtx = document.getElementById("weatherChart").getContext("2d");
16 | let weatherChart;
17 |
18 | // Function to create or update weather chart
19 | function createWeatherChart(labels, data) {
20 | if (weatherChart) {
21 | weatherChart.destroy();
22 | }
23 |
24 | weatherChart = new Chart(weatherChartCtx, {
25 | type: "line", // Change chart type as needed (line, bar, etc.)
26 | data: {
27 | labels: labels,
28 | datasets: [{
29 | label: "Temperature (°C)",
30 | data: data,
31 | backgroundColor: "rgba(54, 162, 235, 0.6)",
32 | borderColor: "rgba(54, 162, 235, 1)",
33 | borderWidth: 1,
34 | fill: false
35 | }]
36 | },
37 | options: {
38 | responsive: true,
39 | maintainAspectRatio: false,
40 | scales: {
41 | yAxes: [{
42 | ticks: {
43 | beginAtZero: true
44 | }
45 | }]
46 | }
47 | }
48 | });
49 | }
50 |
51 | // Event listeners
52 | inputField.addEventListener("keyup", (e) => {
53 | if (e.key === "Enter" && inputField.value.trim() !== "") {
54 | requestApi(inputField.value.trim());
55 | }
56 | });
57 |
58 | locationBtn.addEventListener("click", () => {
59 | if (navigator.geolocation) {
60 | navigator.geolocation.getCurrentPosition(onSuccess, onError);
61 | } else {
62 | alert("Your browser does not support geolocation API.");
63 | }
64 | });
65 |
66 | // Function to request weather data
67 | function requestApi(city) {
68 | api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;
69 | fetchData();
70 | }
71 |
72 | // Function to handle geolocation success
73 | function onSuccess(position) {
74 | const { latitude, longitude } = position.coords;
75 | api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${apiKey}`;
76 | fetchData();
77 | }
78 |
79 | // Function to handle geolocation error
80 | function onError(error) {
81 | infoTxt.innerText = error.message;
82 | infoTxt.classList.add("error");
83 | clearWeatherData();
84 | }
85 |
86 | // Function to fetch weather data from API
87 | function fetchData() {
88 | infoTxt.innerText = "Fetching weather details...";
89 | infoTxt.classList.add("pending");
90 |
91 | fetch(api)
92 | .then((res) => res.json())
93 | .then((result) => {
94 | if (result.cod && result.cod === "404") {
95 | infoTxt.innerText = `${inputField.value} is not a valid city name`;
96 | infoTxt.classList.replace("pending", "error");
97 | clearWeatherData();
98 | } else {
99 | clearWeatherData(); // Clear previous weather and forecast data
100 | weatherDetails(result);
101 | fetchForecast(result.coord.lat, result.coord.lon); // Fetch 7-day forecast
102 | fetchHourlyForecast(result.coord.lat, result.coord.lon); // Fetch hourly forecast
103 | }
104 | })
105 | .catch(() => {
106 | infoTxt.innerText = "Something went wrong";
107 | infoTxt.classList.replace("pending", "error");
108 | clearWeatherData();
109 | });
110 | }
111 |
112 |
113 |
114 | // Function to display weather details
115 | function weatherDetails(info) {
116 | const { name: city, sys: { country }, weather: [{ description, id }], main: { temp, feels_like, humidity }, wind: { speed }, dt } = info;
117 |
118 | const weatherDate = new Date(dt * 1000).toLocaleString('en', {
119 | weekday: 'long',
120 | year: 'numeric',
121 | month: 'long',
122 | day: 'numeric',
123 | hour: 'numeric',
124 | minute: 'numeric',
125 | hour12: true
126 | });
127 |
128 | wIcon.src = getWeatherIcon(id);
129 | weatherPart.querySelector(".temp .numb").innerText = Math.round(temp);
130 | weatherPart.querySelector(".weather").innerText = description;
131 | weatherPart.querySelector(".location span").innerText = `${city}, ${country}`;
132 | weatherPart.querySelector(".temp .numb-2").innerText = Math.round(feels_like);
133 | weatherPart.querySelector(".humidity span").innerText = `${humidity}%`;
134 | weatherPart.querySelector(".wind span").innerText = `${speed} m/s`;
135 | weatherPart.querySelector(".date-time").innerText = weatherDate;
136 |
137 | infoTxt.classList.remove("pending", "error");
138 | infoTxt.innerText = "";
139 | inputField.value = "";
140 | wrapper.classList.add("active");
141 | }
142 |
143 | // Function to fetch daily forecast data
144 | function fetchForecast(latitude, longitude) {
145 | const forecastApi = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=current,minutely,hourly&units=metric&appid=${apiKey}`;
146 |
147 | fetch(forecastApi)
148 | .then((res) => res.json())
149 | .then((data) => {
150 | if (data.cod && data.cod === "404") {
151 | infoTxt.innerText = "Forecast data not available";
152 | infoTxt.classList.replace("pending", "error");
153 | clearForecast();
154 | } else {
155 | updateForecast(data.daily.slice(1, 8)); // Update forecast for next 7 days
156 | }
157 | })
158 | .catch(() => {
159 | infoTxt.innerText = "Forecast data not available";
160 | infoTxt.classList.replace("pending", "error");
161 | clearForecast();
162 | });
163 | }
164 |
165 |
166 | // Function to fetch hourly forecast data
167 | function fetchHourlyForecast(latitude, longitude) {
168 | const hourlyForecastApi = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=current,daily,minutely&units=metric&appid=${apiKey}`;
169 |
170 | fetch(hourlyForecastApi)
171 | .then((res) => res.json())
172 | .then((data) => {
173 | if (data.cod && data.cod === "404") {
174 | infoTxt.innerText = "Hourly forecast data not available";
175 | infoTxt.classList.replace("pending", "error");
176 | clearHourlyForecast();
177 | } else {
178 | updateHourlyForecast(data.hourly.slice(0, 24)); // Update hourly forecast for next 24 hours
179 | }
180 | })
181 | .catch(() => {
182 | infoTxt.innerText = "Hourly forecast data not available";
183 | infoTxt.classList.replace("pending", "error");
184 | clearHourlyForecast();
185 | });
186 | }
187 |
188 | // Function to update daily forecast
189 | function updateForecast(dailyData) {
190 | forecastDetails.innerHTML = ""; // Clear previous forecast details
191 |
192 | dailyData.forEach((day) => {
193 | const { dt, weather: [{ description, id }], temp: { max, min } } = day;
194 | const dayOfWeek = new Date(dt * 1000).toLocaleDateString('en', { weekday: 'long' });
195 |
196 | const forecastCard = document.createElement("div");
197 | forecastCard.classList.add("forecast-card");
198 | forecastCard.innerHTML = `
199 | ${dayOfWeek}
200 |
202 | ${Math.round(max)}°C /
203 | ${Math.round(min)}°C
204 |
205 | ${description}
206 | `;
207 | forecastDetails.appendChild(forecastCard);
208 | });
209 | }
210 |
211 | // Function to update hourly forecast
212 | function updateHourlyForecast(hourlyData) {
213 | const labels = [];
214 | const data = [];
215 |
216 | hourlyData.forEach((hour) => {
217 | const { dt, temp } = hour;
218 | const hourOfDay = new Date(dt * 1000).toLocaleTimeString('en', { hour: 'numeric', hour12: true });
219 | labels.push(hourOfDay);
220 | data.push(temp);
221 | });
222 |
223 | createWeatherChart(labels, data); // Create or update hourly weather chart
224 | }
225 |
226 | // Function to clear weather data
227 | function clearWeatherData() {
228 | wIcon.src = "";
229 | weatherPart.querySelector(".temp .numb").innerText = "";
230 | weatherPart.querySelector(".weather").innerText = "";
231 | weatherPart.querySelector(".location span").innerText = "";
232 | weatherPart.querySelector(".temp .numb-2").innerText = "";
233 | weatherPart.querySelector(".humidity span").innerText = "";
234 | weatherPart.querySelector(".wind span").innerText = "";
235 | weatherPart.querySelector(".date-time").innerText = "";
236 | infoTxt.innerText = "";
237 | forecastSection.style.display = "block"; // Ensure forecast section is visible
238 | clearForecast(); // Clear previous forecast data
239 | clearHourlyForecast(); // Clear previous hourly forecast data
240 | }
241 |
242 |
243 | // Function to clear forecast data
244 | function clearForecast() {
245 | forecastDetails.innerHTML = ""; // Clear daily forecast details
246 | }
247 |
248 | // Function to clear hourly forecast data
249 | function clearHourlyForecast() {
250 | if (weatherChart) {
251 | weatherChart.destroy();
252 | }
253 | }
254 |
255 | // Function to get weather icon based on weather id
256 | function getWeatherIcon(weatherId) {
257 | if (weatherId === 800) {
258 | return "icons/clear.svg";
259 | } else if (weatherId >= 200 && weatherId <= 232) {
260 | return "icons/storm.svg";
261 | } else if (weatherId >= 600 && weatherId <= 622) {
262 | return "icons/snow.svg";
263 | } else if (weatherId >= 701 && weatherId <= 781) {
264 | return "icons/haze.svg";
265 | } else if (weatherId >= 801 && weatherId <= 804) {
266 | return "icons/cloud.svg";
267 | } else if ((weatherId >= 500 && weatherId <= 531) || (weatherId >= 300 && weatherId <= 321)) {
268 | return "icons/rain.svg";
269 | } else {
270 | return "icons/unknown.svg";
271 | }
272 | }
273 |
274 | // Event listener for back button
275 | arrowBack.addEventListener("click", () => {
276 | wrapper.classList.remove("active");
277 | clearWeatherData();
278 | });
279 |
280 | // Change Color Theme
281 | var isDark = false;
282 | const colors = [
283 | "hsl(345, 80%, 50%)",
284 | "hsl(100, 80%, 50%)",
285 | "hsl(200, 80%, 50%)",
286 | "hsl(227, 66%, 55%)",
287 | "hsl(26, 80%, 50%)",
288 | "hsl(44, 90%, 51%)",
289 | "hsl(280, 100%, 65%)",
290 | "hsl(480, 100%, 25%)",
291 | "hsl(180, 100%, 25%)",
292 | ];
293 | const colorBtns = document.querySelectorAll(".theme-color");
294 | const darkModeBtn = document.querySelector(".dark-mode-btn");
295 |
296 | darkModeBtn.addEventListener("click", () => {
297 | isDark = !isDark;
298 | changeTheme(isDark ? "#000" : colors[3]);
299 | });
300 |
301 | colorBtns.forEach((btn, index) => {
302 | btn.style.backgroundColor = colors[index];
303 | btn.addEventListener("click", () => {
304 | changeTheme(btn.style.backgroundColor);
305 | });
306 | });
307 |
308 | function changeTheme(color) {
309 | document.documentElement.style.setProperty("--primary-color", color);
310 | saveTheme(color);
311 | }
312 |
313 | function saveTheme(color) {
314 | localStorage.setItem("theme", color);
315 | }
316 |
317 | function getTheme() {
318 | const theme = localStorage.getItem("theme");
319 | if (theme) {
320 | changeTheme(theme);
321 | }
322 | }
323 |
324 | getTheme(); // Initialize theme on page load
325 |
--------------------------------------------------------------------------------
9 | 
18 |
19 | 