Skip to content

Instantly share code, notes, and snippets.

@morgvanny
Created December 22, 2021 07:48
Show Gist options
  • Save morgvanny/da8f643b93d1021880bd14e4a1bcc0fb to your computer and use it in GitHub Desktop.
Save morgvanny/da8f643b93d1021880bd14e4a1bcc0fb to your computer and use it in GitHub Desktop.
hog solution
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();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment