HTML, CSS, and JS Implementation of a Results Summary Component

What are you most proud of, and what would you do differently next time?

Throughout this project, I had the chance to acquire several important skills. I learned the following:

• how to center all the content of the `` on the screen using Flexbox;
• how to center text horizontally within a block-level element;
• how to vertically align elements inside a container;
• how to use Flexbox to evenly distribute space between two elements within a container;
• how to use JSON to dynamically update the content on the page.

What challenges did you encounter, and how did you overcome them?

• It turned out that I couldn't fetch data directly from the local .json file and view it in my browser due to the CORS policy (which wasn't obvious to me 😅). To resolve this issue, I installed the Live Server extension on my local PC and used it.
• This was my first experience working with JSON and using JavaScript to dynamically update content, so I’m not entirely satisfied with the results. It seems there should be a simpler approach available. Besides, it takes a second to load even this small data.json file provided in the challenge, allowing users to see the raw section before the full content is loaded. I can only imagine the delay if there were more data.

What specific areas of your project would you like help with?

• Any tips on improving the HTML, CSS, or JavaScript code would be welcome, especially regarding more efficient ways to use local JSON data for dynamically populating content. I would also appreciate it if you could provide any reliable, modern resources to help me learn more about this.
• Additionally, while developing, I found myself concerned about the security of the code. It seems that malware could potentially be injected through this line in my code: newIcon.setAttribute("src", `${block.icon}`); Could anyone here provide advice on how to eliminate the vulnerabilities associated with this?