Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo Storage: HTML, Sass (responsive mixins). Extra: JavaScript

James 510

@Auddity

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


The challenge didn't ask for JavaScript, but since I'm trying to learn JS, I challenged myself to add some functionality.

Click on any icon to make the data values and usage bar change.

Resolved:

  • Counter overflow fixed
  • Usage bar doesn't dip below 0% width
  • Space used box remains fixed at end of status bar on various widths of larger screens

Feedback or suggestions are appreciated.

Thank you,

  • J

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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