Results summary component (my take) HTML, CSS, JS

Hello there👋!! Congratulations on completing this challange.

• I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Image element do not have alt attributes

in script.js

<img src="${stat.icon}" id="icon-${index}" class="icon">

In this code you should add alt in your code, with value that tell about your image

<img src="${stat.icon}" id="icon-${index}" class="icon" alt="${alt}">

• This alt attribute provides alternative text for images, which is important for accessibility purposes. Screen readers, use the alt attribute to read out loud what the image is about, allowing visually impaired users to understand the content of the page.

I hope you found this helpful! 😊

Happy coding🤖

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

BODY MEASUREMENTS 📐:

• Use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens.

• For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh.

• But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hello Busca Darius, you are doing good. I would want to point out that your drop shadow or box shadow which should surround the card isn't apparent thereby making the card not so distinct from the background. It would be nice if you could effect that to deliver a top-notch project.

Keep Pushing!!

Hello there! You did a good job, congrats! I've some suggestions though:

• Since you gave your body a height of 100vh, it sometimes doesn't show the whole content. If you change it to min-height, at least, you would give it room to scroll through content.
• You have a div with the class of result-div, and you are using percentages to give it a size. Don't declare both the height and width. To have it as a perfect circle, I recommend giving it width: 50% (for example); aspect-ratio:1 styling. Aspect-ratio makes the height and width equal.
• Your result-div doesn't show the elements in the center. If you make it a flexbox, assign the flex-direction as column, and apply justify-content: center you can have them centered. Also, get rid of that <br/> tag to adjust the gap.
• Why do you limit your container to 375px for mobile? Your breakpoint is somewhat like 400px already. I think, do not leave that little space on the sides. Give it a width:100% for mobile and increase the padding.

I think just those can make a big difference in appearance.

Have fun building!

One way to link your button to javascript is to add an attribute of onclick = function{} on your button.

Example:

<button onclick="someFunction()"></button>

Happy coding ☺️