Results summary component page with dynamic results

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

In this project I added the results dynamically with an object in javascript. I didn't use the data.json file provided by frontendmentor because the web browser throws me an error when I try to load that file directly from the file system.

Also, I added classes to certain elements dynamically.

  Summary
  

.red-font {
	color: var(--light-red);
}

.yellow-font {
	color: var(--orangey-yellow);
}

.green-font {
	color: var(--green-teal);
}

.blue-font {
	color: var(--cobalt-blue);
}

const data = [
  {
    "category": "Reaction",
    "score": 80,
    "icon": "./assets/images/icon-reaction.svg",
    "color": "red-font"
  }
  // ...
]

const resultsList = document.getElementById("results-list");
    
data.forEach(item => {
  const li = document.createElement("li");
    
  li.innerHTML = `
    
      
      ${item.category}
    
    
      ${item.score}
      /
      100
    
  `;
    
  resultsList.appendChild(li);
});

Anyway, It was fun adding the text, images and classes of this way.

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

It was a bit difficult to work with the results numbers because in certain screen sizes they were placed one below the other due to lack of space.

The solution I find was to add the white-space: nowrap property to it

.text-box {
	display: flex;
	white-space: nowrap;
	gap: 8px;
}

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

If you have any suggestion for me, just tell me. I'll appreciate it!