result-summary-component

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

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

CSS 🎨:

• Looks like the component button hover state background has not been properly set yet. We want to set gradient instead of solid color.

• Just add the following css rules

button:hover {
    background-image: linear-gradient(#6542FE, #342CE2);
}

• Now your component's button background for hover state has been set properly

.

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

Happy coding!

I'm here to help you with all your problems.

Firstly the design is good well done on that part but you need to make it more responsive for mobile devices. I would recommend doing mobile first and then build out to desktop.

Here are some pointers.

1. Have a css file. I see that you used the style tag in header but it would be better separation of concerns, you can link it in the head shortcut is: link:css then press tab. Also it's not good practice to use inline styles when it can be avoided, because they clutter the html code and have a higher specificity.

2. You don't need to use fetch or data.json file. I would recommend having a data.js file and have a default export from that file which would be your data. The data would still be in JSON format. Once that is done you can import the data from ur data.js file to ur main.js file. This removes all the extra work needed with fetch and reduces network payload.

3. You can make use of the create element and append child functions of the document obj which will help making the code more readable. So instead of using innerhtml get the reference the the parent, create a div/wrapper for the content, use a forEach not a map and append the child that was created. You can still use innerhtml for the child that was created to put extra content in(that's what I normally do).

Overall spend more time on dom manipulation and CSS and Responsiveness.