Design comparison
Solution retrospective
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
- @BT453567Posted 7 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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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