This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Switch between viewing Daily, Weekly, and Monthly stats
- Solution URL: solution URL
- Live Site URL: My live
- Semantic HTML5 markup
- CSS custom properties
- Sass / SCSS
- Flexbox
- CSS Grid
- Mobile-first workflow
I also gained experience in using JavaScript to fetch and manipulate JSON data, ensuring the dashboard updates dynamically based on user interaction.
In future projects, I aim to refine my understanding of advanced JavaScript concepts, particularly in managing state and optimizing performance.
- CSS-Tricks: A Complete Guide to Grid - This guide was instrumental in helping me understand CSS Grid, which I used extensively in this project.
- MDN Web Docs: Fetch API - This resource helped me implement the fetch functionality to load data dynamically.
I want to thank the Frontend Mentor community for their invaluable feedback and guidance throughout this project. Their support helped me improve the quality of my solution and learn new techniques.