hog solution

index.js

const hogContainer = document.querySelector("#hog-container");

function appendHog(hog) {
  const hogCard = document.createElement("div");
  const nameH2 = document.createElement("h2");
  nameH2.innerText = hog.name;
  hogCard.append(nameH2);
  const img = document.createElement("img");
  img.src = hog.image;
  hogCard.append(img);
  const medalP = document.createElement("p");
  const checked = hog.greased ? "checked" : "";
  hogCard.innerHTML += `<p>Greased: <input ${checked} type="checkbox" /></p>`;
  medalP.innerText = `Highest Medal Achieved: ${hog["highest medal achieved"]}`;
  hogCard.innerHTML += `<p>Weight: ${hog["weight as a ratio of hog to LG - 24.7 Cu. Ft. French Door Refrigerator with Thru-the-Door Ice and Water"]}</p>`;
  hogCard.innerHTML += `<p>Specialty: ${hog.specialty}</p>`;
  hogCard.append(medalP);
  hogCard.className = "hog-card";
  hogContainer.append(hogCard);
}

fetch("http://localhost:3000/hogs")
  .then((r) => r.json())
  .then((hogs) => {
    // can use the json data here
    hogs.forEach((hog) => {
      appendHog(hog);
    });
  });

document.querySelector("#hog-form").addEventListener("submit", (e) => {
  e.preventDefault();
  fetch("http://localhost:3000/hogs", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name: e.target.name.value,
      specialty: e.target.specialty.value,
      greased: e.target.greased.checked,
      "weight as a ratio of hog to LG - 24.7 Cu. Ft. French Door Refrigerator with Thru-the-Door Ice and Water":
        e.target.weight.value,
      "highest medal achieved": e.target.weight.value,
      image: e.target.img.value,
    }),
  })
    .then((resp) => resp.json())
    .then((hog) => {
      appendHog(hog);
      e.target.reset();
    });
});