This project was created based on a Frontend Mentor [https://www.frontendmentor.io/] challenge. The layout and design idea come from Frontend Mentor, while the code implementation is my own.
- HTML5 – Semantic markup designed to ensure accessibility and a logical content structure.
- CSS3 – Utilization of Grid and Flexbox for building a flexible, responsive layout, along with smooth transitions and interactive hover and focus states.
- Vanilla JavaScript (ES6+) – All core logic implemented without external libraries:
- DOM Manipulation for dynamic card rendering based on the data state.
- Event Delegation for optimized and efficient click handling across list items.
- Array Methods (filter, map, forEach).
- Responsive Design – Full interface adaptability across mobile, tablet, and desktop devices using a Mobile-First approach.
- Theme Management: I practiced implementing a Dark/Light mode toggle by manipulating CSS classes and leveraging CSS variables for a seamless user experience.
- DOM Performance: I mastered using closest() and dataset attributes to accurately identify and manipulate specific elements within a list without complex DOM traversal.
- Responsive Grid Systems: I improved my skills in creating complex layouts that fluidly transition from a 3-column desktop view to a single-column mobile view using CSS Grid.
While the current version is fully functional, here are some enhancements I would consider for future iterations:
- LocalStorage Persistence: Integrate localStorage to save the user's selected theme and the active/inactive states of extensions, ensuring data persists after a page reload.
- Search Functionality: Add a real-time search bar to allow users to quickly find specific extensions by name or description.
- Custom Notification System: Instead of instant removal, add a "toast" notification or a confirmation modal to prevent accidental deletions.