Submitted about 2 years ago

Responsive results card made with Flexbox, Tailwind & JS

tailwind-css

David H.•40

@DavidDHDH

A solution to the Results summary component challenge

Preview Code

Solution retrospective

My second challenge ! It was more difficult than expected, especially the 4 results components. I realized that I don't know Flexbox that well, it took me a long time to put everything in place. My mistake was to start by desktop design instead of mobile one, as tailwind is more mobile first.

I've put some JS for the first time, just to update results with the data.json. I've tried to do a loop for that but without succeed. I don't know what else I could have done in JS?

Thanks for futur feedbacks !

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Giovanni Ruberto•260
@Rabberpoli
Posted about 2 years ago
Hi! Congrats on completing this challenge! You did a really good job! Back to your question, it is possible to render your results dinamically using JS. I try to explain one of the multiple solutions you can develop:
```
const scores = [ ]; // here you can put your score objects

scores.foreach(score => {
   const categoryId = score.category + ‘-score’; // Here I’m creating the Id of the HTML element I have to modify

   const categoryHtmlElement = document.getElementById(categoryId);
   categoryHtmlElement.innerText = score.score;
});
```
This should give the desired output.

Let me know if it can be useful! Keep going and happy coding!
Marked as helpful

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