Submitted over 3 years ago

Time Tracking Dashboard using pure HTML, CSS and JS

accessibility

William Firmino•300

@Willwf

A solution to the Time tracking dashboard challenge

Preview Code

Solution retrospective

This is my second solution submitted here. I could recap a lot of things building this one and I fell excited moving forward for more challenges. I didn't use mobile-first design principles but I was able to realize some things to start with it in my next project. I haven't used anything but pure HTML, CSS and JavaScript and it made me feel like I could make it faster if I have used frameworks. Perhaps now I can finally start to grow my knowledge about them.

I appreciate feedback on whatever you think is necessary to be improved. Do my tags on HTML need changes to be more accessible? Did I forget something that could make development and maintenance easier? Anything you might think that is useful for me to know, please be free to share. Thanks, in advance.

Code

Please log in to post a comment

Community feedback

Kerri-Ann•330
@Kerri-AnnBates
Posted over 3 years ago
I think this looks great! Yes, a JS framework would make the JS code more maintainable and readable, but doing it from scratch the way you did is a great way to solidify your JS foundation before moving on to working with a framework.

I noticed from reading through your JS code on line 26 - 28 that you created class names for the card title by replacing a space with a dash using .replace() method. I know that the json data provided did not have any titles with more than one spaces, but just as a buffer, consider using .replaceAll(). Some titles might have more than one spaces that you would want to replace. Something to think about in the future.

Keep it up!
Marked as helpful

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