Weather App

A clean and responsive weather application that provides current weather conditions and a 5-day forecast for any city worldwide.

Project Overview

This weather app helps users:

• Search for weather by city name
• View current weather conditions
• See 5-day weather forecast
• Get weather for their current location
• View weather details like humidity, wind speed, and visibility

Key Features

Weather Information

• Current Weather: Temperature, conditions, and weather icon
• Detailed Metrics: Humidity, wind speed, pressure, and visibility
• 5-Day Forecast: Extended weather outlook
• Location-Based: Get weather for current location

User Interface

• Search Functionality: Easy city search with autocomplete
• Responsive Design: Works perfectly on all devices
• Weather Icons: Visual weather condition indicators
• Error Handling: Helpful messages for invalid searches

Technical Implementation

API Integration

• OpenWeatherMap API: Reliable weather data source
• Geolocation API: Browser location detection
• Fetch API: Modern JavaScript for API requests
• Error Handling: Graceful handling of network issues

Frontend Development

• Vanilla JavaScript: No frameworks, pure JavaScript
• CSS Grid & Flexbox: Modern layout techniques
• CSS Variables: Maintainable styling system
• Mobile-First: Responsive design approach

Code Structure

class WeatherApp {
  constructor() {
    this.apiKey = "your-api-key";
    this.baseUrl = "https://api.openweathermap.org/data/2.5";
    this.init();
  }

  async getCurrentWeather(city) {
    try {
      const response = await fetch(
        `${this.baseUrl}/weather?q=${city}&appid=${this.apiKey}&units=metric`
      );
      const data = await response.json();
      this.displayCurrentWeather(data);
    } catch (error) {
      this.showError("Failed to fetch weather data");
    }
  }

  displayCurrentWeather(data) {
    document.getElementById("temperature").textContent = `${Math.round(
      data.main.temp
    )}°C`;
    document.getElementById("description").textContent =
      data.weather[0].description;
    document.getElementById("humidity").textContent = `${data.main.humidity}%`;
  }
}

Features Breakdown

Search Experience

• City name search with validation
• Recent searches saved locally
• Auto-complete suggestions
• Clear error messages for invalid cities

Weather Display

• Large, easy-to-read temperature
• Weather condition icons and descriptions
• Additional metrics in organized cards
• Forecast cards with daily summaries

Challenges Overcome

• API Rate Limits: Implemented caching to reduce API calls
• Error Handling: Created user-friendly error messages
• Responsive Design: Ensured great experience on all screen sizes
• Performance: Optimized for fast loading and smooth interactions

What I Learned

• API Integration: Working with external weather services
• Async JavaScript: Promises and async/await patterns
• Error Handling: Building robust applications
• Responsive Design: Creating mobile-friendly interfaces
• User Experience: Designing intuitive interfaces

This project showcases practical skills in API integration, responsive design, and creating user-friendly web applications.