A clean, minimal weather app built with vanilla HTML, CSS, and JavaScript. Enter any city name and get real-time weather data — temperature, humidity, wind speed, and a matching weather icon.

• Live weather data via the OpenWeatherMap API
• Displays temperature (°C), city name, humidity, and wind speed
• Dynamic weather icon based on condition — Clouds, Clear, Rain, Drizzle, Mist
• Error handling for invalid city names
• Responsive card layout with gradient UI

Default display: Madurai · 22°C · 50% Humidity · 15 km/h Wind

git clone https://github.com/your-username/your-day-weather-app.git
cd your-day-weather-app

Open app.js and replace the existing key:

const apikey = 'YOUR_OPENWEATHERMAP_API_KEY';

Get a free key at openweathermap.org

Open index.html with Live Server (VS Code) or any local server.
Default port: 5501

├── index.html        # App markup
├── style.css         # Styling — card layout, gradient, responsive
├── app.js            # API logic, DOM updates, event listener
├── images/
│   ├── clouds.png
│   ├── clear.png
│   ├── rain.png
│   ├── drizzle.png
│   ├── mist.png
│   ├── humidity.png
│   └── wind.png
└── .vscode/
    └── settings.json

1. User types a city name and clicks the search button
2. app.js calls the OpenWeatherMap API with the city query
3. On success — temperature, humidity, wind speed, and icon update in the DOM
4. On 404 — error message is shown, weather card is hidden
5. Weather icon swaps dynamically based on data.weather[0].main

The API key in app.js is exposed client-side — totally fine for learning projects, but don't ship to production without moving it server-side or behind an environment variable.

Vanilla JS · First API integration · Kalvium