Weather Forecast App

Table of Contents

Live Demo
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 is a classic two-player game implemented using HTML, CSS, and JavaScript. This engaging application

Read More »
Type to search