A clean, responsive weather application that lets users search any city and view live weather details (temperature, conditions, humidity, wind speed, pressure). Built with vanilla JavaScript and styled with Tailwind CSS. Data is fetched from the OpenWeather REST API.
- City-based live weather search
- Real-time API fetching using
fetch+async/await - Loading animation and graceful error handling for invalid inputs
- Mobile-first responsive UI with Tailwind CSS
- Modern glass-style cards and subtle animations
- HTML5
- Tailwind CSS
- JavaScript (ES6+)
- OpenWeather REST API
Tools: VS Code, Git, GitHub, Browser DevTools
weather-app/ ├─ index.html ├─ script.js ├─ styles.css (or styles.scss) ├─ assets/ └─ README.md
yaml Copy code
- Clone:
git clone https://github.com//weather-api-app.git cd weather-api-app
(Optional) Install a local static server or use VS Code Live Server.
Open index.html in the browser (or run the live server).
const API_KEY = "YOUR_OPENWEATHER_API_KEY";
Type a city name and press Enter or click Search.
Loading state displays while the API request runs.
On success: city name, current temperature, "feels like", description, humidity, wind speed, and pressure are shown.
On failure: a friendly error message is displayed.
Integrating third-party REST APIs with fetch and async/await
UX for asynchronous data (loading/error states)
Utility-first styling with Tailwind CSS
Small performance and accessibility improvements
5-day forecast + hourly breakdown
Geolocation-based default city
Dark/light theme toggle
Deploy to GitHub Pages or Netlify and attach live demo link
MIT License — feel free to reuse. Contact: mukeshrambellamkonda@gmail.com