Submitted 4 months ago

Time Tracking Dashboard Solution with async functions

@Crtykwod

A solution to the Time tracking dashboard challenge

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of how I implemented the dynamic data fetching and rendering using JavaScript. Specifically, using async/await with the Fetch API to load the JSON data and update the UI based on the selected time period (daily, weekly, monthly) felt like a big accomplishment. I also really enjoyed using object destructuring and object lookup to make the code cleaner and more readable.

For example, this part of the code made me proud:

const createTimeCard = (item) => {
  const { title, timeframes } = item;
  const hours = timeframes[timePeriod];
  // Rest of the component logic...
};

What challenges did you encounter, and how did you overcome them?

A big challenge was dynamically updating the time cards when the user switched between daily, weekly, and monthly views. I solved this by creating a function to re-render the cards whenever the time period changed:

const updateTimePeriod = (id) => {
  timePeriod = id;
  fetchDataAndUpdate();
};

What specific areas of your project would you like help with?

I would love feedback on the following areas:

Error Handling in Fetch:

Currently, if the JSON file fails to load, the user doesn't get any feedback. How can I improve this? Should I add a loading spinner or a retry button? Here's the current fetch function:

const fetchDataAndUpdate = async () => {
  try {
    const response = await fetch("data.json");
    const data = await response.json();
    populateDOM(data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

CSS Grid Layout:

I used CSS Grid for the main layout, but I'm not entirely sure if it's optimized. Specifically, I'd like feedback on this part of the CSS:

main {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Is there a better way to handle the grid for different screen sizes?

Accessibility:

I tried to make the dashboard accessible by using semantic HTML and ARIA labels, but I'm not sure if it's enough. For example, is this button accessible enough?

<button class="button-edit">
  <svg>...</svg>
  <span class="sr-only">Timer Settings</span>
</button>

Should I add more ARIA attributes or improve the focus states?

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Huy Phan•3,430

@huyphan2210

Posted 4 months ago

Hi @Crtykwod,

I've seen your solution and would like to share my thoughts:

If you want to notify users when the JSON file fails to load, you can add an alert inside the catch block:

const fetchDataAndUpdate = async () => {
  try {
    // Load JSON
  } catch (error) {
    // console.error("Error fetching data:", error);
    alert(error.message);
  }
};

However, using alert isn’t very user-friendly. A better approach would be to use a <dialog> element in your HTML. You can include two <button> elements—one to retry loading the data and another to cancel.

Example: Using <dialog> for Error Handling

HTML

<dialog id="errorDialog">
  <p id="errorMessage">An error occurred.</p>
  <button id="retryButton">Retry</button>
  <button id="closeButton">Close</button>
</dialog>

JavaScript

const fetchDataAndUpdate = async () => {
  try {
    // Simulate fetching JSON
    throw new Error("Failed to load data"); // Simulating an error
  } catch (error) {
    document.getElementById("errorMessage").textContent = error.message;
    document.getElementById("errorDialog").showModal();
  }
};

// Handle retry
document.getElementById("retryButton").addEventListener("click", () => {
  document.getElementById("errorDialog").close();
  fetchDataAndUpdate();
});

// Handle close
document.getElementById("closeButton").addEventListener("click", () => {
  document.getElementById("errorDialog").close();
});

This approach allows you to style the <dialog> with CSS, which isn’t possible with a JavaScript alert.

Hope this helps!

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