Browser Extension Manager - Frontend Mentor Challenge

A responsive web application that allows users to manage browser extensions with filtering, toggle functionality, and theme switching capabilities.

🎯 Challenge Overview

This project is a Frontend Mentor challenge focused on building a browser extension manager UI. The challenge emphasizes creating an interactive interface with dynamic filtering, state management, and responsive design principles.

💼 Portfolio Project

This project also serves as a portfolio demonstration showcasing:

• Frontend Development: HTML5, CSS3, and JavaScript ES6+ implementation
• Responsive Design: Mobile-first approach with Bootstrap framework
• Interactive UI: Dynamic filtering, theme switching, and state management
• Data Manipulation: JSON data handling and DOM manipulation
• User Experience: Intuitive interface with accessibility features

✨ Features

• Extension Management: Toggle extensions between active and inactive states
• Smart Filtering: Filter extensions by status (All, Active, Inactive)
• Theme Switching:
  • Light and dark mode toggle
  • Persistent theme preferences
  • Smooth theme transitions
• Extension Removal: Remove extensions from the list with confirmation
• Responsive Design: Optimal layout for all device screen sizes
• Interactive Elements: Hover and focus states for all interactive components

🛠️ Built With

• HTML5 - Semantic markup structure
• CSS3 - Custom styling with CSS variables for theming
• JavaScript ES6+ - Dynamic functionality and state management
• Bootstrap 5 - Responsive layout framework
• Google Fonts - Noto Sans font family

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Text editor or IDE for code viewing

Installation

1. Clone the repository or download the project files
2. Open index.html in your web browser
3. Explore the browser extension manager interface

📁 Project Structure

├── index.html              # Main HTML structure
├── style.css               # Custom CSS styling with theme support
├── script.js               # JavaScript functionality
├── data.json               # Extension data source
├── assets/                 # Static assets directory
│   ├── images/             # Icons and logos
│   │   ├── favicon-32x32.png
│   │   ├── icon-moon.svg
│   │   ├── icon-sun.svg
│   │   ├── logo.svg
│   │   └── logo-[extension-name].svg
│   └── fonts/              # Font files
│       ├── NotoSans-VariableFont_wdth,wght.ttf
│       └── static/
└── README.md

🎨 Design Features

• Clean Interface: Minimalist design with clear visual hierarchy
• Smooth Animations: Transitions for theme switching and interactions
• Consistent Branding: Cohesive color scheme and typography

🔧 Functionality

Core Features Implemented:

• ✅ Toggle extensions between active and inactive states
• ✅ Filter extensions by status (All, Active, Inactive)
• ✅ Remove extensions from the list
• ✅ Light/Dark theme switching with persistence
• ✅ Responsive design for all screen sizes
• ✅ Hover and focus states for interactive elements
• ✅ Dynamic content loading from JSON data

User Actions:

1. Filter Extensions: Use radio buttons to filter by All, Active, or Inactive extensions
2. Toggle Status: Click the toggle switch to activate/deactivate extensions
3. Remove Extensions: Click the remove button to delete extensions from the list
4. Switch Theme: Click the moon/sun icon to toggle between light and dark modes
5. Responsive Navigation: Interface adapts to different screen sizes

💡 Key Implementation Details

• Theme Management: CSS variables for seamless light/dark theme switching
• State Persistence: localStorage implementation for theme preferences
• Dynamic Filtering: JavaScript filter functions for real-time extension sorting
• Responsive Layout: Bootstrap grid system with custom breakpoints
• Data Binding: JSON data dynamically rendered to DOM elements

🌟 Future Enhancements

• Add search functionality for extensions
• Implement drag-and-drop reordering
• Add extension categories and tags
• Include extension usage statistics
• Add bulk actions for multiple extensions
• Implement export/import functionality

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

This project is for educational purposes as part of the Frontend Mentor challenge.

Author

• GitHub - @gumballoon
• Frontend Mentor - @gumballoon
• CSS Battle - @gumballoon

🙏 Acknowledgments

• Frontend Mentor for the design and challenge
• Design assets and requirements provided by Frontend Mentor
• Bootstrap team for the responsive framework
• Google Fonts for the Noto Sans font family

---

Frontend Mentor Challenge: Browser Extension Manager UI