Build a Weather App with Javascript HTML CSS
Weather App HTML CSS and Javascript Tutorial. Complete tutorial on how to code a weather app in html css and javascript. In this video, we go over how to fetch weather data using a free weather api called open meteo. This weather api does not require you to register for an account nor purchase an api key. We will fetch the weather data and update the web page with the information based on the city the user has input.
Code: https://github.com/ImKennyYip/weather
Demo: https://imkennyyip.github.io/weather
Weather API: https://open-meteo.com/
Geocoding API: https://open-meteo.com/en/docs/geocod...
const weatherCodeMap = {
0: ["Clear Sky", "sun.png"],
1: ["Mainly Clear", "sun.png"],
2: ["Partly Cloudy", "cloudy.png"],
3: ["Overcast", "overcast.png"],
45: ["Fog", "fog.png"],
48: ["Depositing Rime Fog", "fog.png"],
51: ["Light Drizzle", "rain.png"],
53: ["Moderate Drizzle", "rain.png"],
55: ["Dense Drizzle", "rain.png"],
56: ["Light Freezing Drizzle", "rain.png"],
57: ["Dense Freezing Drizzle", "rain.png"],
61: ["Slight Rain", "rain.png"],
63: ["Moderate Rain", "rain.png"],
65: ["Heavy Rain", "rain.png"],
66: ["Light Freezing Rain", "rain.png"],
67: ["Dense Freezing Rain", "rain.png"],
71: ["Light Snow", "snow.png"],
73: ["Moderate Snow", "snow.png"],
75: ["Heavy Snow", "snow.png"],
77: ["Snow Grains", "snow.png"],
80: ["Slight Rain Showers", "rain.png"],
81: ["Moderate Rain Showers", "rain.png"],
82: ["Violent Rain Showers", "rain.png"],
85: ["Slight Snow Showers", "snow.png"],
86: ["Heavy Snow Showers", "snow.png"],
95: ["Thunderstorm", "thunderstorm.png"],
96: ["Thunderstorm With Slight Hail", "thunderstorm.png"],
99: ["Thunderstorm With Heavy Hail", "thunderstorm.png"]
};
Website: https://www.kennyyipcoding.com/
Java Game Programming Projects Playlist:
• Java Game Programming Tutorials
JavaScript Game Programming Projects Playlist:
• JavaScript Game Programming Tutorials
JavaScript Web Projects Playlist:
• Javascript Website Projects (HTML CSS Java...
Subscribe for more coding tutorials 😄!
⭐ If you enjoyed the tutorial and would like to support the channel, you can do so here 💖: https://buymeacoffee.com/kennyyipcoding