https://github.com/nexoscreator/web-weather-forecast-starter
A simple and responsive weather forecast web app that allows users to search for real-time weather data and a 5-day forecast. Built with HTML, CSS, and JavaScript, using the OpenWeatherMap API.
https://github.com/nexoscreator/web-weather-forecast-starter
css forecast html javascript weather-app
Last synced: 25 days ago
JSON representation
A simple and responsive weather forecast web app that allows users to search for real-time weather data and a 5-day forecast. Built with HTML, CSS, and JavaScript, using the OpenWeatherMap API.
- Host: GitHub
- URL: https://github.com/nexoscreator/web-weather-forecast-starter
- Owner: nexoscreator
- License: mit
- Created: 2024-07-25T17:24:59.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-02-22T09:06:21.000Z (2 months ago)
- Last Synced: 2025-03-27T17:53:04.720Z (29 days ago)
- Topics: css, forecast, html, javascript, weather-app
- Language: HTML
- Homepage: https://nexoscreator.github.io/Web-Weather-Forecast-Starter/
- Size: 89.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
## 🌤 Weather Forecast App
> A simple, responsive weather forecast web app that allows users to search for real-time weather conditions and a 5-day forecast using the OpenWeatherMap API.
---
## ✨ Features
✔ **Location Search:** Search for weather forecasts by entering a city or location.
✔ **Real-Time Weather:** View the current temperature, humidity, wind speed, and weather description.
✔ **5-Day Forecast:** Get a detailed forecast with temperature highs and lows for the upcoming days.
✔ **Responsive Design:** Works smoothly on desktops, tablets, and mobile devices.
---
## 📥 Installation
Follow these steps to set up the project:
1. **Clone the repository:**
```bash
git clone https://github.com/nexoscreator/Web-Weather-Forecast-Starter.git
cd Web-Weather-Forecast-Starter
```
2. **Open `index.html`** in your preferred web browser.
3. **Start searching** for weather updates by entering a city name.
---
## 🎯 Usage
> 1. **Open the app in your browser.**
> 2. **Enter the city name** in the search box and hit Enter or click Search.
> 3. **View real-time weather details and a 5-day forecast.**
---
## 🔗 Useful Links
[](https://nexoscreator.github.io/Web-Weather-Forecast-Starter)
[](https://github.com/nexoscreator/Web-Weather-Forecast-Starter)
[](https://youtu.be/rMnDe0iEGRs?si=B2viVesOhHYusbBG)
---
## 🌎 API Integration
This app uses the [OpenWeatherMap API](https://openweathermap.org/api) to fetch weather data.
To use the API, follow these steps:
1. Sign up for a free API key from [OpenWeatherMap](https://home.openweathermap.org/users/sign_up).
2. Replace the `API_KEY` placeholder in `script.js` with your actual API key:
```javascript
const apiKey = "YOUR_API_KEY_HERE";
```
3. Save the changes and reload the app.
---
## 🤝 Contributing
We ❤️ contributions! Follow these steps to contribute:
1. 🍴 **Fork** the repository
2. 🌿 **Create** a new branch (`git checkout -b feature/AmazingFeature`)
3. 💾 **Commit** your changes (`git commit -m 'Add some AmazingFeature'`)
4. 🚀 **Push** to the branch (`git push origin feature/AmazingFeature`)
5. 🔃 **Open a Pull Request**
📖 _See our [Contribution Guidelines](CONTRIBUTING.md) for more details._
---
## 📄 License
This project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file for details.
---
## ⭐ Support the Project
If you find this project helpful, please consider **starring ⭐ the repository** or **sponsoring 💖 on GitHub**!
---
## 📬 **Contact & Community**
💬 Join us on **Discord**: [Click Here](https://discord.gg/H7pVc9aUK2)
🐦 **Follow on Twitter**: [@nexoscreator](https://twitter.com/nexoscreator)
📧 **Email**: [[email protected]](mailto:[email protected])
Created with ❤️ by @nexoscreator