Skip to content
Submitted 14 days ago

Grid - JS - HTML

Mayza•40
@MayzaMendesRodrigues
A solution to the Browser extension manager UI challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud to have implemented a JavaScript cloning and templating approach that improves code security and structure. It made the UI safer and the code more modular and maintainable. Next time, I would focus on applying filters that modify the data directly in the JSON, rather than just updating the visual interface. I’d also like to integrate a frontend framework like React to make the application more scalable and organized.

What challenges did you encounter, and how did you overcome them?

This project helped reinforce what I’ve been learning so far. The main challenge was applying concepts I had studied across different platforms and putting them into practice. To overcome this, I broke the project into smaller tasks, reviewed documentation regularly, and tested each part of the UI as I built it.

What specific areas of your project would you like help with?

I’d appreciate feedback on how to better handle filters that modify the JSON data itself, rather than just the UI. I'm also open to any suggestions or improvements from the community — I'm here to learn and grow from others’ experiences.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,410
    @thisisharsh7

    Excellent work overall! Your use of JavaScript templating and cloning is impressive, enhancing security and modularity.

    • For improvements, consider modifying the JSON data directly for filtering. You could update the extension array using methods like map or splice when toggling isActive or removing items, ensuring data and UI stay in sync.

    • For scalability, integrating React could streamline state management—look into hooks like useState for managing extensions. The filter buttons work well, but adding a loading state during fetch could improve UX.

    • Accessibility can be enhanced by adding ARIA attributes (e.g., aria-checked on toggles) and keyboard navigation for buttons.

    • To optimize, consolidate repeated CSS properties (e.g., border-radius) into a shared class and use CSS variables for colors consistently.

    • Next steps: explore state management libraries (e.g., Redux) or CSS-in-JS for larger projects.

    Great job overall-keep up the good work!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord