Design comparison
Solution retrospective
Feedback on my JS is greatly appreciated. Also, if reading from a .json file, is async functions always needed? Or would it be possible to convert a .json file to a JS object without using async functions in $(document).ready
Community feedback
- @MikeBish13Posted over 2 years ago
Great job on this project!
In answer to your specific question -- generally yes, when fetching data from an external file or an API, this needs to be done asynchronously because the fetching can take some time (maybe the server is being slow, for example) and as Javascript is single-threaded, everything else will need to wait until the data is fetched. Here's a nice article explaining it.
As for more general feedback on your JS, though your solution works it seems to be very prescriptive, ie you have assigned variables in your JS file (the cardNames, for example) which essentially dictate how the data is displayed on the screen, and this isn't very flexible.
Say that we wanted to add a new activity ('Coding') into the grid and we added the corresponding data to the data.json file. You would need to go into your JS file and edit it, rather than the JS file being able to handle the new data and display it accordingly. Similarly, say there were 200 activities that needed to be displayed - you would have to manual write them into your code.
This is why it would be better to automatically fetch and then display the data dynamically.
Hope all that makes sense, and keep up the good work!
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