JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<button>Load Products</button>

    <hr />

    <ul></ul>

JavaScript

const btn = document.querySelector("button");
btn.onclick = () =>
  fetch("https://fakestoreapi.com/products")
    .then((res) => res.json())
    .then((json) => present(json));

function present(products) {
  const ul = document.querySelector("ul");

  for (let i = 0; i < products.length; i++) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const detailBtn = document.createElement("button");
    span.textContent = products[i].title;
    detailBtn.textContent = "Detail";
    detailBtn.onclick = () => {
      alert(products[i].id);
      alert(products[i].category);
      alert(products[i].description);
    };
    ul.appendChild(li);
    li.appendChild(span);
    li.appendChild(detailBtn);
  }
}