toddler_shop_frontend/scripts/main.js

var all_products

let barcodeForm

async function makeAPIRequest(request) {
    try {
        const response = await fetch(request);
        const result = await response.json();
        return result
      } catch (error) {
        console.error("Error:", error);
      }
}

async function loadProducts() {
    const loadProductRequest = new Request("http://127.0.0.1:8000/products")
    all_products = await makeAPIRequest(loadProductRequest)
    console.log("Loaded products:", all_products)
    barcodeForm = document.getElementById("barcode_form");
    barcodeForm.addEventListener("submit", (e) => {
        e.preventDefault();
    
        console.log('help')
    
        const barcode = document.getElementById('barcode_input').value
        var chosen_product
        for (index = 0; index < all_products.length; index++) {  
            if (all_products[index].barcode == barcode) {
                chosen_product = all_products[index]
            }
        }

        barcode_input.value = ""
    
        const product_image_placeholders = document.getElementsByClassName('product_image')
        console.log(product_image_placeholders)
        for (index = 0; index < product_image_placeholders.length; index++) { 
            console.log(product_image_placeholders[index].src)
            if (product_image_placeholders[index].src == "") {
                product_image_placeholders[index].src = chosen_product.image_url
                return false
            }
        }
    });
  }