Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Time Tracking Dashboard

#bem#fetch#sass/scss#semantic-ui#solid-js

@Tuason066

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View Challenge

Design Comparison

SolutionDesign

Report

8

Accessibility Issues

18

HTML Issues

View Report

Jeffrey Tuason’s questions for the community

Hi,

I need help with my JavaScript.

As you can see in my script I have three functions (dailyCards, weeklyCards, and monthlyCards) I'd like to ask if I can make it only in one function because they have only small differences.

Thank you so much for helping out.

Community Feedback

Aadvik 1,110

@Aadv1k

Posted

Good job on breaking down your JS into functions, that is a good practice, so, here is a simple fix; remove all the other functions and just have a single one getCard(date) where the date is either daily, monthly or weekly, then simply in your template replace ${item.timeframes.daily.current} with ${item.timeframes.[date]['current']} (do this will all the references) and voila

Marked as helpful

2


@Tuason066

Posted

Hi @Aadv1k,

Thank you so much for your help. It resolves my problem and this will help me to improve my skills.

I just want to ask is this how we can pass a parameter/argument inside of the template string. [parameter/argument] using square brackets?

1

Aadvik 1,110

@Aadv1k

Posted

@Tuason066 in a object there are two ways to get a property, one is by the dot method foo.bar second is the foo['bar'] to access a key using a variables you have to use the second on foo[variable], it doesn't matter if it's in a template string or as-is, feel free to clarify your doubts if you have any more, Im happy to help

0

@Tuason066

Posted

@Aadv1k

For now this the only question I have. Thank you so much for enlighten me.

Happy coding.

0

Please focus on giving high-quality, helpful feedback and answering any questions Tuason066 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!