Free Friday 2/27/26

Today I built a weather app using HTML, CSS, and JavaScript. The user enters a city, and the app fetches real-time weather data from an API. It then displays the city name, temperature, humidity, weather description, and an emoji that matches the conditions.

weatherForm.addEventListener("submit", async event => { ... })

^This handles the form submission. It prevents the page from reloading, gets the city input, calls the weather API, and either displays the data or shows an error.

async function getWeatherData(city):

^This function sends a request to the OpenWeather API using the city name.

function displayWeatherInfo(data):

^This function takes the API data and displays it on the page. It gets the city name, temperature, humidity, and description, then converts the temperature to Fahrenheit, creates elements, and adds them to the card.

function getWeatherEmoji(weatherId):

^This function returns an emoji based on the weather condition ID. It uses ranges to match different weather types like rain, snow, clouds, or clear skies.

function displayError(message):

^This function shows an error message on the screen. It clears the card and displays the message when the user enters an invalid city or the API request fails.