Build a Weather App

Project Overview

Build a weather application that fetches real-time weather data from an API and displays it in a beautiful, responsive interface.

Features

Search for weather by city
Display current weather conditions
Show 5-day forecast
Geolocation support
Temperature unit toggle (°C/°F)
Weather icons and animations

Technologies

HTML5
CSS3 (with animations)
JavaScript (ES6+)
OpenWeatherMap API
Fetch API

Prerequisites

Intermediate JavaScript knowledge
Understanding of APIs
Familiarity with async/await

Getting Started

Sign up for a free API key at OpenWeatherMap
Create project files: index.html, style.css, app.js
Set up basic HTML structure

Implementation Steps

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="search-box">
            <input type="text" id="cityInput" placeholder="Enter city name...">
            <button id="searchBtn">Search</button>
        </div>
        <div id="weatherDisplay"></div>
        <div id="forecast"></div>
    </div>
    <script src="app.js"></script>
</body>
</html>

2. Fetch Weather Data

const API_KEY = 'your_api_key_here';
const API_URL = 'https://api.openweathermap.org/data/2.5';

async function getWeather(city) {
    try {
        const response = await fetch(
            `${API_URL}/weather?q=${city}&appid=${API_KEY}&units=metric`
        );
        
        if (!response.ok) {
            throw new Error('City not found');
        }
        
        const data = await response.json();
        displayWeather(data);
    } catch (error) {
        console.error('Error:', error);
        alert('Failed to fetch weather data');
    }
}

function displayWeather(data) {
    // Display weather information
}

3. Add Geolocation

function getLocationWeather() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            position => {
                const { latitude, longitude } = position.coords;
                fetchWeatherByCoords(latitude, longitude);
            },
            error => {
                console.error('Geolocation error:', error);
            }
        );
    }
}

Challenges

Add weather alerts
Implement autocomplete for city search
Save favorite locations
Add weather maps
Create weather widgets

Resources

Deployment

Deploy your app to:

GitHub Pages
Netlify
Vercel

Share your completed project with the community!