This project is a simple weather app that displays the current weather conditions for a specific city. Users can type the name of a city in the search bar, and upon clicking the search button, the app retrieves and displays the weather data, including temperature, humidity, and wind speed.
- City Search: Enter a city's name to get current weather information.
- Current Temperature: Displays the temperature in Celsius.
- Weather Conditions: Shows an icon representing the current weather (e.g., sunny, cloudy).
- Additional Information:
- Humidity: Displays the current humidity percentage.
- Wind Speed: Displays the current wind speed in km/h.
- Frontend: HTML, CSS, JavaScript
- API: OpenWeatherMap API (or any other weather API) to fetch real-time weather data.
- Design: The design uses modern, vibrant gradients and minimalistic UI for a clean and visually appealing experience.
- Build Tools: Vite (or similar build tool)
- The user enters the name of a city in the search bar.
- On clicking the search button, the app sends an API request to the weather service (e.g., OpenWeatherMap API).
- The app retrieves and displays:
- Temperature in Celsius
- Weather icon representing current conditions
- Humidity percentage
- Wind speed in km/h
- The data is presented in an elegant card layout.
- Clone the repository:
git clone https://github.com/yourusername/weather-app.git cd weather-app - Install Dependencies:
npm install
- Build the project:
npm run build
- Run the project in development mode:
npm run dev
- Open the provided localhost link (e.g., http://localhost:3000) in your browser to view the app.
- Type a city name in the search bar.
- Click on the search button to fetch the current weather for the city.
- Add support for geolocation to fetch weather for the user's current location.
- Display more detailed weather forecasts (e.g., 5-day forecast).
- Include error handling for invalid city names or API request failures.