Dynamic Result summary component using vanilla JS

I have completed this as my 13th challenge in Frontend Mentors. I am glad to accept any feedback and suggestions regarding the accessibility and the techniques that I have used to develop the webpage.

I have learned to import the JSON data and used it to create the elements dynamically

For used the data from JSON we need to fetch the data.

async function fetchData() {
  try {
    const response = await fetch('./data.json');
    const data = await response.json();

    console.log(data);

    for (let index = 0; index < data.length; index++) {
      addElement(data[index]);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

To Dynamically add the elements we can create the nodes using the document.createElement() function and to add the class element.classList.add() function.

To make it as a child we use the parent.appendChild(child)

<!-- parent -->
let card = document.createElement("div");
card.classList.add("card__topic", obj.color);

<!-- child -->
let img = document.createElement("img");
img.src = obj.icon;

<!-- to append -->
card.appendChild(img);

To Insert the element before the element. I used the parent.insertBefore(element, [element before which it should be inserted])

summary.insertBefore(card, btn);

If anybody has an easier approach then I am happy to hear that and please go through the code and if you have to correct any mistakes I am happy to recive the comments.

Advance thanks for the comments 🫡.