Design comparison
Solution retrospective
I found myself using multiple for loops to access similar data. Is there any way I can refactor this using less code?
Community feedback
- @grizhlieCodesPosted over 2 years ago
Hi Ervin,
I made a video covering how I did this challenge, a lot of people seem to have found it useful. I'm pretty sure I explain the JS as I'm going through it.
In case you want a sneak peak of the code, here is the link to my GitHub repo.
Generally there is nothing wrong with using a for loop though.
The alternative you can try is the forEach loop.
It works like a normal for loop in a way, it usually takes in an array of items (lets say cards or buttons) and you can just run any code you want.
You have access to the index of each item as well as the item itself so for example:
buttons.forEach((button, index) => { button.textContent = `Button num ${index + 1}`; })
Whether or not it uses less code: probably. But I'd concern myself with readability personally rather than length. The less work your future self/someone else has to do to understand the code, the better. I've seen people obsess over quantity of code and they sometimes go as far as to sacrificing readability (I'm not saying you do this!), and man it's tough to work out what's what. Especially in the evening after a bunch of other work π₯²
Happy learning π!
P.S. I go into some CSS that you may find useful in the video for some additional tips.
1 - @Enmanuel-Otero-MontanoPosted over 2 years ago
Hello Ervin! Congratulations for your solution.
I completed this challenge last year but didn't upload it until a few months ago and my JavaScript code is very similar to yours. As for whether it can be refactored with less code, thinking quickly now with a little more experience, I think one way would be to:
- Put a single listener event for all 3 buttons
- Detect when the button was clicked and pass that button by parameter to a function to fetch the corresponding data
Maybe that way you can save a couple of loops. Would have to try. I'm not going to do it π. If you do, please let me know.
Cheers!π¦Ύπ¦Ύπ¦Ύ
1@ervinCodesPosted over 2 years ago@Enmanuel-Otero-Montano Hey Emmanuel, appreciate the feedback.
I just saw your solution and they are very similar! I think you make a good point in creating a single listener for the click event. I will have to look into that in the future when I revisit this project, and when I do i'll let you know. I'm getting used to fetching data so I think with more experience I will have better solutions. :)
0
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