https://github.com/tonystark-19/weather-app
A simple weather app that fetches real-time weather data using the OpenWeather API and displays temperature, humidity, wind speed, and weather conditions with dynamic icons.
https://github.com/tonystark-19/weather-app
api css3 html5 javascript weather-app
Last synced: about 2 months ago
JSON representation
A simple weather app that fetches real-time weather data using the OpenWeather API and displays temperature, humidity, wind speed, and weather conditions with dynamic icons.
- Host: GitHub
- URL: https://github.com/tonystark-19/weather-app
- Owner: TonyStark-19
- Created: 2025-03-29T17:26:51.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-29T17:46:11.000Z (about 2 months ago)
- Last Synced: 2025-03-29T18:29:16.616Z (about 2 months ago)
- Topics: api, css3, html5, javascript, weather-app
- Language: CSS
- Homepage: https://weather-app-orcin-seven-66.vercel.app
- Size: 301 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌤️ Weather App
A simple weather app that fetches real-time weather data using the OpenWeather API and displays temperature, humidity, wind speed, and weather conditions with dynamic icons.
---
## 📸 Screenshots
---
## 🌍 Live Demo
🔗 **View live deployment** : [Weather-app](https://weather-app-orcin-seven-66.vercel.app/)
---
## 🚀 Features
- Search for weather by city name
- Displays temperature, humidity, and wind speed
- Dynamic weather icons based on conditions
- User-friendly UI
- Error handling for invalid city names
---
## 🛠️ Tech Stack
- HTML
- CSS
- JavaScript
- OpenWeather API
---
## 📂 Project Structure
```
📦 weather-app
├── 📂 images # Weather condition icons
├── 📜 index.html # Main HTML file
├── 📜 style.css # Styling for the app
├── 📜 script.js # JavaScript logic
└── 📜 README.md # Project documentation
```
---
## ⚙️ Setup & Installation
1. Clone this repository:
```sh
https://github.com/TonyStark-19/Weather-app.git
```
2. Open `index.html` in your browser.
3. Replace `YOUR_API_KEY_HERE` in `script.js` with your OpenWeather API key.
4. Start searching for weather updates!
---
## 📌 Usage
1. Enter a city name in the search bar.
2. Click the search button.
3. View real-time weather details including temperature, humidity, wind speed, and an appropriate weather icon.
---
## ❗ Issues & Improvements
- [ ] Improve UI design
- [ ] Add more weather details (e.g., sunrise/sunset, forecast)
- [ ] Implement geolocation support
---
## 🙌 Contributing
Feel free to fork this project, make improvements, and submit a pull request!
---
💡 *Built with ❤️ by Aditya chandel*