Frontend Mentor - Browser Extensions Manager UI Solution

This is a solution to the Browser extensions manager UI challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

The challenge

Users should be able to:

• Toggle extensions between active and inactive states
• Filter active and inactive extensions
• Remove extensions from the list
• Select their color theme
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Features

• Responsive Design: Mobile-first approach with breakpoints at 768px and 1024px
• Theme Toggle: Light and dark theme with local storage persistence
• Extension Management: Toggle, filter, and remove extensions
• Dynamic Content: Extensions loaded from JavaScript data
• Interactive Elements: Hover and focus states for all interactive elements

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla JavaScript
• SVG for theme icons

What I learned

This project helped me strengthen my skills in several areas:

1. CSS Custom Properties: Using variables for theming and consistent styling

:root {
  /* Theme Variables */
  --bg-gradient: var(--light-gradient);
  --card-bg: white;
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  /* More variables... */
}

[data-theme="dark"] {
  --bg-gradient: var(--dark-gradient);
  --card-bg: var(--neutral-800);
  --text-primary: white;
  /* More dark theme variables... */
}

2. Theme Switching with JavaScript: Implementing a theme toggle with local storage

function toggleTheme() {
  const currentTheme = document.body.getAttribute('data-theme') || 'light';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

  document.body.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
}

3. Dynamic Content Generation: Creating HTML elements with JavaScript

function createExtensionCard(extension) {
  const { logo, name, description, isActive } = extension;

  // Create card element
  const card = document.createElement('div');
  card.classList.add('extension-card');
  if (!isActive) card.classList.add('inactive');

  // More element creation...

  return card;
}

4. SVG Manipulation: Working with SVG icons and controlling them with CSS

<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 22 22" class="theme-icon light-icon">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.98" d="..."/>
</svg>

5. Responsive Design: Creating layouts that work on different screen sizes

@media (min-width: 768px) {
  .extensions-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .extensions-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Continued development

In future projects, I'd like to focus on:

• Implementing more advanced animations and transitions
• Adding drag-and-drop functionality for reordering items
• Improving accessibility features
• Implementing more complex filtering and sorting options
• Adding search functionality

Author

• Frontend Mentor - @Ayokanmi-Adejola