Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Time Tracking Dashboard using Fetch API

Sezal Saundarya•100
@Sezalsaundarya11
A solution to the Time tracking dashboard challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time? Project Retrospective: Time Tracking Dashboard Challenge

Most Proud Of:
I'm most proud of successfully implementing the functionality to fetch data from a JSON file and dynamically update the dashboard based on different timeframes ('daily', 'weekly', 'monthly'). The use of event listeners to switch between timeframes and update the displayed data accordingly enhances the user experience and functionality of the dashboard.

Next Time:
Next time, I would focus on improving the code organization and structure to enhance readability and maintainability. Specifically, I would consider breaking down the functionality into smaller, reusable functions and modules. Additionally, I would explore error handling to gracefully handle scenarios such as failed API requests or unexpected data formats. Improving the design and styling of the dashboard would also be a priority to enhance its visual appeal and usability.

Support Needed:
I would appreciate feedback on optimizing the code for better performance and scalability. Additionally, guidance on implementing error handling and improving the design would be valuable. Suggestions for additional features or enhancements to make the dashboard more robust and user-friendly would also be welcomed.

What specific areas of your project would you like help with? Seeking Help: CSS Styling for Time Tracking Dashboard

Request:
I'm seeking assistance with the CSS styling for my time tracking dashboard project. Specifically, I'd like feedback and guidance on improving the visual design and layout to enhance user experience and appeal.

Areas Needing Attention:

  1. Layout Optimization: Suggestions on improving the layout to make it more intuitive and visually appealing.
  2. Responsive Design: Tips for ensuring the dashboard is fully responsive across various screen sizes and devices.

Additional Context:
The current CSS styling is functional but lacks finesse. I aim to create a polished and professional appearance for the dashboard to provide users with a seamless and enjoyable experience. Any suggestions, tips, or resources related to CSS design principles and best practices would be greatly appreciated.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Sezal Saundarya'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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.