Weather App
Weather App is a minimal, no-build-step frontend application built with HTML, CSS, and JavaScript. It fetches live weather conditions from the OpenWeatherMap API and presents them in a clean, neumorphic dark card interface.Quickstart
Get the app running in your browser in minutes
Setup guide
Step-by-step instructions to clone, configure, and deploy
API key guide
Get your free OpenWeatherMap API key
Customization
Change the city, units, and visual style
What it does
When you open the app, it immediately calls the OpenWeatherMap Current Weather API for a configured city and displays:- Location name — the city returned by the API
- Weather description — e.g., “light rain”, “clear sky”
- Temperature — converted from Kelvin to Celsius
- Weather icon — condition icon from OpenWeatherMap
- Humidity — percentage relative humidity
- Wind speed — in meters per second
Tech stack
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3, Bootstrap 5.3, Font Awesome 4.7 |
| Logic | Vanilla JavaScript (Fetch API) |
| Data | OpenWeatherMap Current Weather API |
| Font | Poppins (Google Fonts) |
Key features
Real-time weather data
Real-time weather data
Uses the browser’s native
fetch() API to call the OpenWeatherMap /data/2.5/weather endpoint on every page load. No server required — everything runs client-side.Neumorphic dark UI
Neumorphic dark UI
The weather card uses a dark
#343434 background with layered box-shadow values to create a soft neumorphic (new skeuomorphism) effect, giving depth without heavy graphics.Zero build step
Zero build step
No Node.js, no bundler, no framework. Open
index.html directly in a browser or deploy the three files to any static host.Responsive layout
Responsive layout
The card uses viewport-relative widths (
80vw, max-width: 30rem) and flexbox centering so it looks good on any screen size.