Code Hunter Sharath 🚀

Welcome to Code Hunter Sharath, where I share programming tutorials, coding challenges, and everything tech! Whether you're starting from scratch or looking to dive deeper, my videos are designed to help you become a better coder.

📺 Subscribe to My YouTube Channel

👉 Subscribe to Code Hunter Sharath

---

📈 My YouTube Stats

Check out my channel's progress:

• Subscribers:
• Total Views:

🎯 Milestones

• 5000 Subscribers Goal! – Help me reach this goal!
• Current Subscribers:
• Total Views:

---

🌦 Weather Dashboard – Advanced JavaScript Project

A modern, portfolio-ready Weather Dashboard built using HTML, CSS, and JavaScript, powered by the OpenWeather API and enhanced with an interactive Leaflet map and Dark Mode.

This project demonstrates real-world frontend development practices including API integration, clean JavaScript architecture, and user-focused UI design.

---

🌐 Live Demo

🚀 Try the application live here:
👉 https://codehuntersharath.github.io/Weather-Dashboard-Advanced-JavaScript-Project/

---

🎥 Full Video Tutorial

Learn how this project is built step-by-step on YouTube:

If you’re learning JavaScript and building real projects, consider subscribing for weekly hands-on tutorials.

---

❤️ Support & Motivation

If this project helped you:

👍 Like the video
💬 Leave a comment
🔁 Share with friends
🔔 Subscribe for weekly JavaScript projects

Your support helps me create more free learning content 🚀

---

✨ Features

• 🌦 Real-time weather information
• 📅 5-day weather forecast
• 🌙 Dark / Light mode toggle
• 🗺 Interactive map using Leaflet.js
• 🔍 Search weather by city
• 🔌 OpenWeather API integration
• 🧠 Clean and scalable JavaScript architecture
• 🧪 Manual testing and error handling

---

🛠 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6+)
• OpenWeather API
• Leaflet.js

---

📂 Project Structure

weather-dashboard/
│
├── index.html
├── style.css
└── script.js

---

🔧 Setup & Installation

Follow these steps to run the project locally.

1. Clone the repository

git clone https://github.com/your-username/weather-dashboard.git

2. Navigate to the project folder

cd weather-dashboard

3. Add your OpenWeather API key

Open script.js and replace the placeholder:

const API_KEY = "YOUR_API_KEY_HERE";

Get your free API key from:
https://openweathermap.org/

---

4. Run the application

Simply open index.html in your browser.

No build tools or dependencies required.

---

🗺 Map Integration

This project uses Leaflet.js to:

• Display weather-based locations
• Show city coordinates on the map
• Dynamically update the map when searching new cities

Leaflet is lightweight and ideal for modern frontend dashboards.

---

🌙 Dark Mode Implementation

Dark mode is implemented using:

• CSS variables
• JavaScript theme toggle logic

Benefits include improved accessibility, better user experience, and easy theme scalability.

---

🧪 Testing & Error Handling

The application handles:

• Invalid city names
• Empty search input
• API request failures
• Network errors

Manual testing ensures the project behaves like a real production-ready application.

---

🚀 Future Enhancements

• ⭐ Save favorite cities
• 📍 Auto-detect user location
• ⚛️ React version
• ⚡ Progressive Web App (PWA)
• 🔐 Backend integration

Suggestions are welcome via issues or video comments.

---

📺 Video Tutorial

🎥 Build an Advanced Weather Dashboard with HTML, CSS & JavaScript
👉 https://www.youtube.com/@CodeHunterSharath

---

🤝 Contributing

Contributions are welcome.

1. Fork the repository
2. Create a new feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

---

👨‍💻 Author

Sharathchandar K
Full Stack Developer | Educator | Creator

• YouTube
• Instagram
• Twitter
• LinkedIn

---

📜 License

This project is created for educational purposes.

⚠️ Please do not re-upload this code or video without proper credit.

⭐ If you found this project useful, please star the repository to support the series!

---

Built with ❤️ by Sharathchandar K