Building an India COVID-19 Tracker with HTML, CSS, JavaScript

This project was built while vibing code with ChatGPT , which made the whole process a lot more fun and collaborative. 😄

---

🔧 Tools & Technologies

• HTML5 – Structure of the site
• CSS3 – Styling and responsive layout
• JavaScript – Dynamic data fetching
• disease.sh API – Free and public COVID-19 API

---

🎨 Features

• 🌗 Dark Mode toggle with local storage persistence
• 📱 Responsive Design for mobile devices
• 🔄 Real-time Data pulled from the disease.sh API

---

📁 File Structure

covid-tracker/
├── index.html
├── style.css
├── script.js

---

🌐 API Integration

We used the disease.sh API to get real-time COVID-19 data:

fetch('https://disease.sh/v3/covid-19/countries/India')

We extracted:

• active cases
• recovered cases
• deaths

---

💡 Dark Mode

Dark mode was implemented by toggling a class on the body and saving user preference with localStorage:

localStorage.setItem('theme', 'dark');

---

📱 Responsive Design

With max-width containers and flexible layout using CSS, the site looks great on phones and desktops alike.

---

✅ Final Touches

• Tooltip toggle icon for better UX
• Aesthetic improvements and color contrast for light/dark modes
• All functionality is fully client-side , no backend needed

---

🚀 Live Preview & Source Code

Want to see it live or fork the project?

🔗 GitHub Repository

---

🙌 Conclusion

Creating your own COVID-19 tracker helps you learn modern web technologies while building something practical. We combined real-time data, themes, and accessibility – all in one clean project.

Whether you’re a student or a frontend enthusiast, this project is a great showcase for your portfolio.

---

Stay safe and keep coding! 🇮🇳

---

Feel free to comment or share your version of the tracker!