Skip to content
Submitted 11 months ago

Responsive time tracking dash with CSS grid

Tarek Islam•220
@tarekul
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  1. Responsive Design: Implemented media queries to ensure that the layout adapts to different screen sizes, enhancing the user experience across devices.
  2. Dynamic Data Handling: JavaScript to fetch and display data from a JSON file demonstrating understanding of asynchronous programming and data manipulation. The ability to update the UI based on user interactions (like changing timeframes) is a great feature.
  3. User Interaction: The addition of event listeners for the timeframe buttons allows for interactive elements that enhance user engagement. This makes the dashboard more dynamic and user-friendly.
  4. Modular Code Structure: Organized your JavaScript functions (like updateCards and addEventListeners) in a way that promotes readability and maintainability. This modular approach makes it easier to understand and update the code in the future.
  5. Use of Modern CSS Features: The use of features like clamp() for responsive font sizes leveraging modern CSS capabilities to create a more flexible layout.
  6. Error Handling: Implementation of error handling for the fetch ensuring that users are informed if there are issues loading data.
  7. Active Class Management: The management of the active class for the timeframe buttons enhances the user experience by providing visual feedback on which option is currently selected.
What challenges did you encounter, and how did you overcome them?
  1. CORS Issues: When fetching data from a local JSON file, encountered Cross-Origin Resource Sharing (CORS) issues when trying to load the file directly in the browser. This required setting up a local server to serve your files over HTTP.
  2. Dynamic Data Handling: Managing dynamic data updates based on user interactions (like changing timeframes) can be complex. Ensuring that the UI updates correctly and reflects the right data without introducing bugs can be challenging.
Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Tarek Islam'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