Web Development Project

Weather App

A responsive weather application designed in Figma and developed using HTML, CSS, and JavaScript, featuring live weather data, recent search history, smooth UI animations, and a clean minimal interface.

HTML CSS JavaScript OpenWeatherMap API Figma Responsive Design

Project Overview

This weather app allows users to search for real-time weather details by entering a city name. The application displays current temperature, weather condition, city and country, humidity, wind speed, feels-like temperature, local date and time, sunrise, and sunset information in a clean and minimal interface.

My Contribution

UI Design

Designed the initial app layout in Figma with a soft muted color palette, rounded components, clean spacing, and a minimal weather dashboard style.

Frontend Development

Built the interface using HTML and CSS, then implemented interactive weather search functionality using JavaScript.

API Integration

Connected the application to the OpenWeatherMap API to fetch live weather data, including temperature, weather type, location, humidity, wind speed, sunrise, and sunset.

User Experience

Added keyboard search support, invalid city error handling, recent search history using localStorage, animated weather transitions, and dynamic weather icons for a more polished user experience.

How It Works

User enters a city name in the search field

JavaScript sends a request to the OpenWeatherMap API

Weather data is retrieved in JSON format

Temperature, city, country, and weather condition are displayed

Humidity, wind speed, and feels-like temperature are updated dynamically

Sunrise and sunset times are calculated using API timestamp data

Weather icon changes based on the current weather condition

Invalid city names trigger an error message

Recent city searches are saved using localStorage

Previous searches appear as clickable history chips

Weather results animate smoothly when updated

Key Features

Live

Weather Data

API

Integration

UX

Error Handling

API

Live Weather Data

History

Recent Searches

UX

Error Handling

Motion

Smooth Animations

UI

Figma Design

Project Gallery

Why This Project Matters

This project demonstrates my ability to turn a Figma design into a functional and interactive web application. It combines responsive layout design, JavaScript logic, API integration, asynchronous data fetching, localStorage usage, animation effects, and user-focused error handling in one complete frontend project.