File: app/js/app.js

const coffees = document.querySelector(".coffees");
const msg = document.querySelector("#message");

const showCoffees = async () => {
  let output = "";
  const response = await fetch(
    "http://localhost/test-projects/php-mongodb-project/api/product.php"
  );
  const json = await response.json();
  // console.log(json.data);
  json.data.forEach(
    ({ name, image }) =>
      (output += `
              <div class="card">
                <img class="card--avatar" src=${image} loading="lazy" />
                <h1 class="card--title">${name}</h1>
                <a class="card--link" href="?cf=${name}">Taste</a>
              </div>
              `)
  );
  if (coffees) coffees.innerHTML = output;
};

document.addEventListener("DOMContentLoaded", showCoffees);

let input = document.querySelector("input[type=file]");
let imageName = document.querySelector(".imagename");

if (input) {
  input.addEventListener("change", () => {
    let inputImage = document.querySelector("input[type=file]").files[0];

    imageName.innerText = inputImage.name;
  });
}

const form = document.querySelector("form");
if (form) {
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const submitBtn = document.querySelector('button[name="submit"]');
    const defualtBtn = submitBtn.innerText;
    submitBtn.innerText = "Please wait...";
    try {
      const formdata = new FormData(form);
      formdata.append("image", `images/${imageName.innerText}`);
      const fd = JSON.stringify(Object.fromEntries(formdata.entries()));
      const response = await fetch(
        "http://localhost/test-projects/php-mongodb-project/api/product.php",
        {
          method: "post",
          body: fd,
          headers: { "Content-Type": "application/json" },
        }
      );
      const json = await response.json();
      if (json?.status !== "success") throw new Error(json.message);
      msg.innerText = json.message;
      msg.style.color = "green";
      submitBtn.innerText = defualtBtn;
      submitBtn.disabled = false;
      form.reset();
    } catch (error) {
      // console.log(error);
      msg.innerText = error.message;
      msg.style.color = "red";
      submitBtn.innerText = defualtBtn;
      submitBtn.disabled = false;
    }
  });
}

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker
      .register("serviceWorker.js")
      .then((res) => console.log("service worker registered"))
      .catch((err) => console.log("service worker not registered", err));
  });
}