
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Built With
- Semantic HTML5 markup
- CSS custom properties and BEM methodology
- Vanilla JavaScript with ES6+ features
- Mobile-first responsive design
- Focus on accessibility
- Progressive enhancement
- Responsive Design: Adapts seamlessly between mobile and desktop views
- Keyboard Accessibility: Full keyboard navigation support with focus trapping
- Screen Reader Support: ARIA attributes for enhanced accessibility
- Smart Animations: Respects user's motion preferences
- Click Outside: Closes share popup when clicking outside
- Performance Optimized: Debounced resize handling
The project provided great insights into creating accessible interactive components. Here are some key implementations:
Managing component state:
const state = { isShareActive: false, isMobileView: window.innerWidth < BREAKPOINTS.TABLET, focusableElements: [], };
Implementing focus trapping for keyboard users:
function setupFocusTrap() {
const focusableSelectors =
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
state.focusableElements = Array.from(
elements.sharePopup.querySelectorAll(focusableSelectors)
);
}
Respecting user preferences:
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { document.documentElement.style.setProperty("--transition-default", "0s"); }
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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