🌤️ SkyCast – Modern Weather App

Real-Time Weather at Your Fingertips

SkyCast is a modern, responsive weather application built with HTML, CSS, and Vanilla JavaScript. It provides real-time weather information, a 5-day forecast, location-based weather updates, favorite cities, and a clean, user-friendly interface.

Designed with performance, accessibility, and maintainability in mind, SkyCast demonstrates modern frontend development practices and API integration.

---

✨ Features

🌍 Weather Information

• Real-time weather updates
• Search weather by city name
• Current location weather (Geolocation API)
• 5-day weather forecast
• Weather condition icons
• Temperature
• Feels Like
• Humidity
• Wind Speed
• Atmospheric Pressure
• Visibility
• Sunrise & Sunset
• Last Updated Time

⭐ User Experience

• Favorite cities
• Recent searches
• Automatic loading of last searched city
• Beautiful loading animations
• Professional error handling
• Empty state UI
• Smooth transitions
• Mobile-first responsive design

💾 Local Storage

• Save favorite cities
• Save recent searches
• Remember last searched city

🛡️ Error Handling

• Empty input validation
• City not found
• Internet connection errors
• API errors
• Location permission denied

---

🛠️ Built With

• HTML5
• CSS3
• Vanilla JavaScript (ES6+)
• Fetch API
• Geolocation API
• Local Storage API
• Weather API

---

📁 Folder Structure

SkyCast/
│
├── assets/
│   ├── icons/
│   └── images/
│
├── css/
│   ├── style.css
│   ├── variables.css
│   └── responsive.css
│
├── js/
│   ├── app.js
│   ├── api.js
│   ├── ui.js
│   ├── storage.js
│   ├── location.js
│   └── utils.js
│
├── index.html
├── README.md
└── .gitignore

---

📸 Screenshots

Desktop

Mobile

---

🚀 Getting Started

Clone the Repository

git clone https://github.com/your-username/skycast.git

Navigate to the Project

cd skycast

Open

Simply open index.html in your preferred browser.

---

🌐 API

This project uses a public Weather API to fetch live weather information.

Example:

• OpenWeatherMap API
• WeatherAPI

---

🎯 Learning Objectives

This project demonstrates:

• API Integration
• Asynchronous JavaScript
• Fetch API
• DOM Manipulation
• Modular JavaScript
• Responsive Web Design
• Local Storage
• Geolocation API
• Error Handling
• Clean Code Structure

---

📈 Future Improvements

• Weather maps
• Air Quality Index (AQI)
• Hourly forecast
• Multiple language support
• Unit converter (°C / °F)
• Weather alerts
• PWA support
• Offline caching

---

🤝 Contributing

Contributions, suggestions, and improvements are always welcome.

Feel free to fork this repository and submit a pull request.

---

📄 License

This project is licensed under the MIT License.

---

👨‍💻 Author

Muhammad Abdullah

• GitHub: https://github.com/Abdullah-18155

---

⭐ Support

If you found this project helpful, please consider giving it a ⭐ Star on GitHub.

It helps support my work and motivates me to build more open-source projects.

---

Thanks for visiting SkyCast! ☁️

Stay informed. Stay prepared.