A modern, responsive weather forecasting app built with HTML, CSS, and JavaScript — featuring live time zones, dynamic themes, and smooth UI animations.

weather-app-1

weather-app-2

Weather App Homepage

** 🔍 Search Any City Worldwide **

Instant weather search using OpenWeather API

• Displays:

• Temperature

• Weather description

• Humidity

• Wind speed

• 🕒 Live Time Tracking

• Shows your local time when the page loads

• Shows live local time of the searched city

• Updates every second

• 🎨 Dynamic Background Themes

• Weather affects the background:

• ☁️ Cloudy Dark grey
• 🌧️ Rainy Sky blue
• ☀️ Clear Soft yellow
• ❄️ Snowy Clean white
• ⚡ Thunderstorm Dramatic orange
• 💫 Smooth Animations

• Fade-in results

• Loading blinker

• Clean button hover effects

• 🔠 Ultra Smart Description Formatter

• Beautifully formats complex weather text like:

• heavy-intensity rain

• sleet & hail

• rain/snow mix

• light rain (drizzle)

• storm: high-intensity

• HTML5 Structure
• CSS3 Styling, layout, animations
• JavaScript (ES6+) Logic, API integration
• OpenWeather API Weather data retrieval
• SVG Icons UI clarity
• Responsive Web Design Mobile-friendliness

👉 Deployed on Netlify

📂 Project Structure weather-app/ │ ├── index.html ├── style.css ├── script.js └── icons/ ├── github.svg └── linkedin.svg

1️⃣ Clone the repository

git clone https://github.com/obithelight/weather-app.git

2️⃣ Enter the project directory

cd weather-app

3️⃣ Run the app Simply open:

index.html

No dependencies needed.

Get your free API key from OpenWeather:

https://openweathermap.org/api

Replace the key in script.js:

const apiKey = "YOUR_API_KEY";

Works beautifully on:

• 🖥️ Desktop

• 💻 Laptop

• 📲 Tablet

• 📱 Mobile

• Kenneth Onu

• OpenWeather

• JavaScript community

• Inspiration from modern weather UIs

• This project is licensed under the MIT License.

© 2025 Weather App • All Rights Reserved.