Results summary component using HTML, CSS

Community feedback

• 

  Wagner Morais•230

  @wagnnermoraisPosted 12 months ago

  hey, sandeep, how u doing?

  to use the json file, first of all, you need to create a javascript file, then, you must link it in the bottom of your html file, right above your closing body tag </body> (best practices), using the script tag, it would be something like script type="module" src="./script.js"

  then, in you js file, you must link the data file, a simple import should work, now, back to html, in your "container-col" div, add an id attribute to it, id="container" for instance.

  in the js again, "get" the container element using any built in function that js provides, a simple get element by id will work.

  after that, its time to iterate through the data file using a callback fn. using a forEach, you will use the createElement fn to use the data from data json.

  then, after creating all elements, you will just append it to the parent element, and thats pretty much it!

  heres the code:

  import data from "./data.json" assert { type: "json" };

  const container = document.getElementById("container");

  data.forEach((item) => {

  const div = document.createElement("div");

  div.classList.add("summary-result-box");

  const logo = document.createElement("img");

  logo.setAttribute("src", item.icon);

  const category = document.createElement("p");

  category.innerText = item.category;

  const score = document.createElement("p");

  score.innerText = item.score;

  div.appendChild(logo);

  div.appendChild(category);

  div.appendChild(score);

  container.appendChild(div); });

  ive made a better comment before, explaining line by line, but front-end mentor simply deleted it... but i hope you can understand that way. :)

  0