Weather Forecast App

Live Demo
Github
Technologies used -
HTML
CSS
JS
Description

This Weather App provides current weather details for any city you search. Enter the city name, and the app displays temperature, humidity, and wind speed, along with icons representing various weather conditions like rain, snow, or clear skies. Simple and responsive, this app offers a quick look at the weather for travelers, daily planners, and everyone in between.

How It Works: The JavaScript code makes the app interactive by:

Fetching weather data: Uses the OpenWeather API to get data for the city entered.
Displaying relevant information: Shows the city name, temperature, humidity, and wind speed.
Updating based on conditions: Changes the icon depending on the weather (e.g., rain, clouds, snow).

Highlighted Source Code
				
					const apiKey = "YOUR_API_KEY";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
    if (response.status == 404) {
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    } else {
        const data = await response.json();
        document.querySelector(".city").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C";
        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
        document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";
    }
}

Recent Projects

Follow me

Github Linkedin Instagram

Related Projects
Fun Project

Tic Tac Toe Game

The Interactive Tic Tac Toe Game lets two players compete in a 3×3 grid. It includes a simple interface, feedback on wins, and sound effects for added fun.

Read More »
Form & Input Handling

Text-to-Speech Converter

This Text-to-Speech app lets you type text and listen to it spoken aloud in different voices. Choose a voice, click ‘Listen,’ and hear the text in real-time.

Read More »
Type to search