Frontend Mentor | Time tracking dashboard with JS coding challenge solution

Solution retrospective

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

First time using fetch, I built the site mobile first and would do the same next time.

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

I had an incorrect fetch path, found the solution in the discord help section.

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

Feedback regarding my JS, to me it looks overly complex for what i wanted to achieve.

Community feedback

@BT453567

Posted 5 months ago

Hello

Great looking solution, well done.

A couple of small issues I noticed:

When you reduce the window size, the first column becomes difficult to see. Perhaps add a min-width to the first column?

The values for Weekly Exercise and Social last week are wrong, you have placed the values for current there.

You have the wording "Last Week" for Daily and Monthly.

With regards to reducing code:

I have noticed in your HTML you have duplicated the top part of the card for daily, weekly and monthly.

As a suggestion create a function called for example fetchData(period) { }

Then add a listener to the buttons as follows:

buttonDaily.addEventListener("click", function() { fetchData("daily"); });

buttonWeekly.addEventListener("click", function() { fetchData("weekly"); });

Within the fetchData(period) function you could then add the following:

switch (period) { case 'daily': displayMessage = "Yesterday - ";

and so forth.

When you update the HTML, you could then use this variable for example:

document.getElementById("work-previous").textContent = displayMessage + workData.timeframes.weekly.current;

Regards

Marked as helpful

Time tracking dashboard with JS