Skip to content
Submitted 13 days ago

fylo-data-storage-component-master

vite, react, bootstrap, accessibility
LVL 3
@SRcpr
A solution to the Fylo data storage component challenge

Solution retrospective


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

I am most proud of building a pixel-first, mobile-first responsive layout that matches the design specifications closely across all screen sizes. Next time, I would focus more on writing cleaner modular JavaScript logic right from the start (especially for handling complex elements like range inputs and tooltips) and implement a more structured component-driven approach to save development time.

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

There were a few key challenges I encountered:

Deciding the best layout approach (Flexbox vs Grid / row vs col).

Achieving a pixel-perfect match with the design.

Customizing the input[type="range"] track and thumb.

Creating a custom positioned tooltip.

How I overcame them: I resolved the layout and pixel-perfect design issues by using a structured row/col system along with a dedicated external CSS file. For the input[range],

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

I want to help in input[range].

how can I fill background color for track runner when data consumed?

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Sunil kumar’s solution.

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