📚 History Timeline Web App

📌 Project Description

This project is a web-based application that allows users to explore historical events by entering a specific year. The application fetches real-time data from a public API and displays relevant historical information in a clean and interactive timeline format.

The goal of this project is to demonstrate the use of JavaScript, API integration, and modern UI design techniques.

---

🌐 API Used

• Wikipedia API Used to fetch historical events and summaries based on the entered year.

---

🚀 Features

• 🔍 Search by Year Users can enter a year to fetch related historical events.

• 📊 Sorting Events can be sorted alphabetically (A–Z / Z–A) using JavaScript array .sort().

• ❤️ Favorites System Users can save events using local storage and view them later.

• 🌙 Dark / Light Mode Toggle between themes for better user experience.

• ⚡ Debouncing (Bonus Feature) Optimizes performance by limiting how often search/filter functions are executed.

• 🎨 Responsive UI Works across mobile, tablet, and desktop devices.

---

🛠 Technologies Used

• HTML
• CSS
• JavaScript
• Fetch API
• LocalStorage

---

🧠 Concepts Implemented

• API integration using fetch()

• Array Higher-Order Functions:

  • .map() for rendering data
  • .filter() (earlier version)
  • .sort() for sorting

• Event handling

• DOM manipulation

---

⚙️ How to Run the Project

1. Download or clone the repository
2. Open index.html in any web browser
3. Enter a year and explore events

---

📦 Project Structure

• index.html → Home page
• timeline.html → Displays events
• favorites.html → Saved events
• style.css → Styling
• app.js → Main logic

---

🎯 Future Improvements

• Add category filters (science, war, etc.)
• Add pagination or infinite scroll
• Improve event accuracy with better APIs

---

💪 Conclusion

This project helped in understanding how to work with APIs, manage data dynamically, and build a responsive and interactive user interface using JavaScript.

---