Skip to content
Submitted almost 4 years ago

Astro, WCAG Accessibility, CSS Grid & Animations, Javascript Fetch API

accessibility, astro, bem, sass/scss, animation
Mark Teekman•365
@markteekman
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I was wondering how you would get the data from the data.json file and whether you would have a different solution to fetching the data and toggling between that data depending on what stats the user wants to see. In my case I used the JavaScript Fetch API, a function and some if statements to make it all work. Would love to know whether this is considered a good practice or whether there are better ways to approach and solve this. Thanks in advance :)

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Hey Mark, excellent job on this challenge. Your solution looks fantastic, and I love the hover animation you've added to the cards! 😍

    Regarding loading in the data from the JSON file, the way you've done it with the URL from your GitHub repo is fine and mimics the way you'd pull data from an API. You could also use a relative path with fetch to retrieve the data the same way from the file. Either way works well.

    I'd never actually heard of Astro before seeing your solution. It looks interesting! I'd love to hear your thoughts about it and whether you're enjoying working with it.

    Keep up the great work! 👍

    Marked as helpful
  • MikevPeeren•2,100
    @MikevPeeren

    Hey Mark,

    Nice job, the only thing that bothered me some is the outline on click. Is that done for A11Y reasons ?

    Marked as helpful
  • Duyen Nguyen•950
    @Duyen-codes

    Hey! Just wanna come it and tell you that your solution is great! Love the animations and everything. I am also working on this challenge but have been stuck on how to inject JSON data to my html. I'm learning HTML, CSS and JS at the moment. I've had a look at your solution for inspiration but too hard for me to understand how and why :) But yeah thanks anyway.

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