PROJECT TRACKER INTRO COMP 🎯 [ ACCESSIBLE - ES6 - BEM - VANILLA CSS ]

👾 Hello, Frontend Mentor Community,

This is my solution for the Project Tracker Intro Component.

• Scored 98.4% on Google Pagespeed Insights! 🤩
• Added outline for interactive elements like buttons, a to ensure better accessible solution
• Minified the css & js files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

Thoughts :

• My primary goal during building this project is to build it accessible as much as possible. In the end i figured about how we can make accessible hamburger menu for Mobiles without affecting the horizontal menu for Desktops.
• The Hamburger menu for mobile will support Enter, Space, ↓ to open the menu, and then we can use ↓ to traverse the menu items.
• Used inclusive-menu-buttonscript by Heydon to quickly implement these functions. Actually this script was build for dropdown menu, in our case we use for Hamburger menu.
• The edge case i faced is to apply implement these logics on for mobile devices, so that i added conditionals to watch window size whether it's mobile or not & uses watchMedia api to set these logics otherwise the logics won't be applied
• The watchMedia is not added as a eventListener, So if you try to switch Desktop to mobile in RWD Mode then the Hamburger menu will won't work, I'll try to add an event listener for that
• Feedback regarding these implementations are also welcome!

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !