Time tracking dashboard solution, using Async JS, JSON, and DOM.

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

I learned that asynchronous JavaScript allows me to fetch data from a server without blocking the main thread, ensuring a smooth user experience. I used fetch("data.json") to retrieve data asynchronously and await response.json() to convert it into a JavaScript object. I also learned how to handle potential errors using try...catch to prevent crashes. For object and data manipulation, I learned how to use find() to search for a specific object in an array and optional chaining (?.) to safely access nested properties without errors. Additionally, I used template literals (${}) to dynamically update the UI based on fetched data. These techniques helped me efficiently work with structured data and interact with the DOM seamlessly.

<div class="time">
  <span class="hours"></span>
  <span class="previous-hours"></span>
</div>

const timeTrackingOptions = document.querySelectorAll("#time-tracking-options .option");
const timeTrackers = document.querySelectorAll(".time-tracker");

// Attach event listeners to tracking options
timeTrackingOptions.forEach((option) => {
  option.addEventListener("click", async () => {
    optionType = option.getAttribute("data-option");
    await updateTimeTrackers(optionType);
  });
});

// Fetch and update all time tracker elements
async function updateTimeTrackers(optionType) {
  try {
    const response = await fetch("data.json");
    const data = await response.json();

    timeTrackers.forEach((tracker) => {
      const category = tracker.getAttribute("data-category");
      const categoryData = data.find((item) => item.title === category);
      
      const currentHours =
        categoryData.timeframes?.[optionType]?.current || 0;
      const previousHours =
        categoryData.timeframes?.[optionType]?.previous || 0;
    });
  } catch (error) {
    console.error("Error fetching time tracking data:", error);
  }
}

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

1️⃣ Incorrect Data Access (JSON Structure Issue)

Problem:

I was trying to access data[category]?.timeframes?.[optionType]?.current, but data is an array of objects, not an object with category names as keys. category was a string (e.g., "work"), but in data.json, categories are stored under "title" (e.g., "Work").

Solution:

Instead of using data[category], we used find() to search for the correct object in the array:

const categoryData = data.find((item) => item.title.toLowerCase() === category.toLowerCase());

2️⃣ Ensuring Default Selection on Page Load

Problem:

The default selection was not applied correctly when the page loaded. Solution:

We triggered a click event on the second option (weekly) in DOMContentLoaded:

// Initial load
document.addEventListener("DOMContentLoaded", () => {
  timeTrackingOptions[1].click();
});