https://github.com/theionius/weather-app
A modern, responsive weather application that provides current weather conditions and 5-day forecasts for any city worldwide
https://github.com/theionius/weather-app
weather-forecast webapp
Last synced: over 1 year ago
JSON representation
A modern, responsive weather application that provides current weather conditions and 5-day forecasts for any city worldwide
- Host: GitHub
- URL: https://github.com/theionius/weather-app
- Owner: TheIonius
- License: mit
- Created: 2025-01-02T16:23:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-08T17:19:30.000Z (over 1 year ago)
- Last Synced: 2025-01-30T20:56:31.752Z (over 1 year ago)
- Topics: weather-forecast, webapp
- Language: CSS
- Homepage: https://theionius.github.io/Weather-App/
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE.TXT
Awesome Lists containing this project
README
# ☀️ Weather App
## Features
- Real-time weather data using the OpenWeatherMap API
- Current weather conditions including:
- Temperature
- Weather description
- Humidity
- Wind speed
- 5-day weather forecast
- Smooth animations and transitions
- Responsive design
- Clean and intuitive user interface
- Search by city name
## Technologies Used
- HTML5
- CSS3
- JavaScript (ES6+)
- OpenWeatherMap API
- CSS Animations and Transitions
- Flexbox for responsive layouts
## Installation & Setup
1. Clone this repository
```bash
git clone https://github.com/TheIonius/weather-app.git
```
2. Replace the `apiKey` in `index.html` with your own OpenWeatherMap API key
```javascript
const apiKey = 'YOUR_API_KEY_HERE';
```
3. Open `index.html` in your web browser
## Features in Detail
### Current Weather
- City name display
- Current temperature in Celsius
- Weather description
- Weather icon
- Humidity percentage
- Wind speed in km/h
### 5-Day Forecast
- Day of the week
- Weather icon
- Temperature
- Weather description
### UI Features
- Gradient animated background
- Smooth fade-in animations
- Hover effects on forecast items
- Responsive design for all screen sizes
- Input field with focus effects
- Floating animation on weather icons
## ⭐ Acknowledgements
- [OpenWeatherMap API](https://openweathermap.org/api) weather data
- [Font Awesome](https://fontawesome.com/) weather icons
## License
Open source described under the MIT License
Questions, Comments? I would love to hear your feedback <3 🐾