Skip to content
Submitted almost 3 years ago

Time tracking dashboard with vanilla JS

Zeiyar Lynn•335
@Zeiyar-Lynn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I have a question. In this challenge, for fetching the data from a JSON file, I used classic XML. Firstly I fetch the data, store it in a variable and change the HTML from what button is clicked. This is okay as I don't need to wait to get the data back(I assume users won't click the button as soon as the page is loaded). I'm also aware it takes time to get back the data from the server. The question is "Should I fetch the data only when a button is clicked or should I fetch it first(only once) and store it as I did".

Community feedback

  • Alex•2,010
    @AlexKMarshallPosted almost 3 years ago

    For an app like this I would fetch all the data on page load. No need to wait for the user to press a button, as we know we're going to need the data anyway. We might render the whole app on the server anyway, rather than fetching the data from the client separately. But either way, it should happen immediately.

    I see you've used XMLHttpRequest to fetch the data. For getting data like this I would suggest using fetch instead, it is the standard these days, and you'd likely only find the older method in legacy code.

    Be careful with semantics too. You're using multiple <h1> elements, there should only be one, the main page heading. Your card headings should be level 2.

    Make sure that your context triggers are actually buttons, not just an <svg> with cursor: pointer. And make sure that button has an accessible label like 'more actions' or something similar.

    Marked as helpful
    1
    Zeiyar Lynn•335
    @Zeiyar-LynnPosted almost 3 years ago

    @AlexKMarshall Thanks for your explanation.

    0
  • Kewin•150
    @kewinzaq1Posted almost 3 years ago

    Hi, Nice, but mobile version not yet box heading, fix this

    1

Please log in to post a comment

Log in with GitHub

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