A web application built with vanilla HTML, CSS, and JavaScript, powered by the OpenWeatherMap API and bundled with Vite. It allows users to get current weather details for any city.
Users should be able to:
- View weather details for any city they enter.
- See feedback messages if:
- No city name is entered.
- An invalid city name is entered.
- Navigate using the keyboard.
- Repository URL: https://github.com/heygauravshukla/weather-app
- Live Site URL: https://weather-app-gshukla.vercel.app
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- OpenWeatherMap API – Provides historical, current, and forecasted weather data via high-speed APIs.
- Vite – A blazing-fast frontend build tool.
- Practiced DOM manipulation
- Integrated APIs in JavaScript
In future updates, I will:
- Add subtle animations using CSS
- Improve semantics and accessibility
- Open Props – A collection of ready-to-use, supercharged CSS variables. I used it for colors.
- Consistent, Fluidly Scaling Type and Spacing – An article by Andy Bell on CSS-Tricks. Helped me explore fluid type and spacing scales.
- Fluid Space Calculator – An online tool by Utopia. Helped me define spacing and sizing scales.
- A (More) Modern CSS Reset – A modern CSS reset by Andy Bell. I used it as the base layer in my CSS.
- JavaScript Tutorial by Bro Code (YouTube) – A useful tutorial series for learning JavaScript by building mini projects. This project was inspired by one of them.
- Website – Gaurav Shukla
- Frontend Mentor – @heygauravshukla
- Twitter – @heygauravshukla
This project was part of a JavaScript tutorial by Bro Code. I built it a while ago while learning JavaScript. Later, I decided to revamp it with a modern design and optimized JavaScript logic.