Time Tracking Dashboard (JSON data, JS, SCSS)
Design comparison
Solution retrospective
The dashboard has been created with semantic HTML5, SCSS (grid) and JavaScript functions. The JSON data provided is pulled dynamically and rendered front-end. A function called updateCardValues() function takes the parameter "tab", ("daily," "weekly," or "monthly"), loops through each item in the dashboardData array and extracts the title and timeframes for the given tab. It then updates the corresponding HTML elements with the latest and previous week's hours for each category. This was deemed the simplest way of approaching the task, given the number of nested objects.
The script also listens for the DOMContentLoaded event, which triggers when the HTML document has been completely loaded and parsed. The loadDailyData function is then called to set the initial state of the dashboard to show daily data.
Lighthouse Scores: 99 | 100 | 100 | 100
Planned Iterations:
- Refactor JS functionality
Comments, suggestions and opinions welcome.
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