PHP Classes

File: app/js/app.js

Recommend this page to a friend!
  Classes of Okanlawon Anuoluwapo   PHP MongoDB CRUD Example of API   app/js/app.js   Download  
File: app/js/app.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP MongoDB CRUD Example of API
API that provides CRUD operations with MongoDB
Author: By
Last change:
Date: 8 months ago
Size: 2,570 bytes
 

Contents

Class file image Download
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)); }); }