📁 Digital Organizer – Information Management Dashboard

A web-based Digital Asset Organizer that allows users to manage, search, filter, and categorize digital files efficiently using a modern dashboard interface.

This project is built using HTML, CSS, and JavaScript and focuses on the theme Information Management & Digital Organization.

---

🧩 Problem Statement

Managing digital files becomes difficult without proper organization, categorization, and search tools. Users often struggle to quickly find, sort, and maintain their digital assets efficiently.

This project solves the problem by providing a simple and interactive web-based dashboard where users can organize, search, filter, and manage digital assets easily in one place.

---

🚀 Features Implemented

➕ Add new digital assets (name, type, tags, status) 🔍 Search assets by name with highlight 🗂 Filter by:

• File Type (Document, Image, Video, Code, Audio)
• Status (Active, Archived, Review)

🔤 Sort assets:

• A–Z / Z–A
• Newest First / Oldest First

🗑 Delete assets 💾 Data persistence using LocalStorage 🌗 Dark Theme & Light Theme toggle 🎨 Clean and professional dashboard UI

---

🧠 DOM Concepts Used

This project uses the following DOM concepts:

• querySelector / getElementById for element selection
• Dynamic table rendering using JavaScript
• Event listeners for buttons, search, filters, and sorting
• DOM updates after adding and deleting assets
• Class toggling for theme switching
• Form handling and input validation

---

🛠 Technologies Used

• HTML5 – Structure
• CSS3 – Styling, themes, layout
• JavaScript (Vanilla JS) – Logic, filters, storage, UI updates
• Font Awesome – Icons

---

📂 How It Works

1. User adds an asset using the “New Asset” button

2. Asset is stored in browser LocalStorage

3. Assets are displayed dynamically in a table format

4. User can:

   • Search by name
   • Filter by type and status
   • Sort by name or date

5. Theme toggle allows switching between dark and light modes

---

▶️ Steps to Run the Project

1. Clone or download this repository
2. Open index.html in any modern browser
3. Start adding and managing assets

No backend or server required.

---

⚠ Known Limitations

• Data is stored only in browser LocalStorage (not shared across devices)
• No user authentication system
• No actual file upload, only asset metadata management
• Data will be lost if browser storage is cleared

---

🎯 Learning Outcomes

Through this project, I learned:

• DOM manipulation and dynamic rendering
• Implementing search, filter, and sorting logic
• Using LocalStorage for data persistence
• Designing professional dashboard layouts
• Implementing theme switching

---

👨‍💻 Author

Harish Seervi Frontend Developer | Student

---

📜 License

This project is created for educational purposes.