Aide pour travail sur du javascript

le lien est https://www.fil.univ-lille.fr/~abdelkafi/TW1_New/projets/2022/mini-projet-javascript.html

const createFigureBlock = function (product) {
      const figure = document.createElement("figure")
      const img = document.createElement("img")
      img.src = product.image
      img.alt = product.name
      figure.appendChild(img)
      return figure
}

Q5-Q6-Q7-Q8

      const createOrderControlBlock = function (index) {
const control = document.createElement("div");
control.className = "controle";

// crée l'élément input permettant de saisir la quantité
const input = document.createElement("input");
input.id = index + "-qte";
input.type = "number";
input.step = "1";
input.value = "0";
input.min = "0";
input.max = MAX_QTY.toString();
control.appendChild(input);

// Crée le bouton de commande
const button = document.createElement("button");
button.className = 'commander';
button.id = index + "-order";
control.appendChild(button);

input.addEventListener('change', function (event) {
    const { value } = event?.target || {}
    const isValid = verifQuantity(value)
    this.value = isValid ? value : 0
    button.style.opacity = isValid ? 1 : 0.3
    button.disabled = !isValid
})

button.addEventListener('click', function () {
    orderProduct.call({ id: index })
})

return control;
}

function verifQuantity (value) {
    return !`${value}`.match(/\D/) || !isNaN(value) || value != 0
}
 function orderProduct() {
const idx = parseInt(this.id);
const qty = parseInt(document.getElementById(idx + "-qte").value);
if (qty > 0) {
    addProductToCart(idx, qty); // ajoute un produit au panier
    document.getElementById(`${idx}-qte`).value = ''
    document.getElementById(`${idx}-order`).disabled = true
    document.getElementById(`${idx}-order`).style.opacity = 0.3
}
}

Q9

  const renderAchats = function () {
      const achats = document.createElement('div')
      achats.className = 'achats'
      let montant = 0
      for (let i=0; i<cart.length; i++) {
          const achat = document.createElement('div')
          achat.className = 'achat'
          achat.id = `${i}-achat`
          const { product, qty } = cart[i]
          achat.appendChild(createFigureBlock(product))
          achat.appendChild(createBlock('h4', product.name))
          achat.appendChild(createBlock('div', qty, 'quantite'))
          achat.appendChild(createBlock('div', product.price, 'prix'))
          const controle = document.createElement('div')
          controle.className = 'controle'
          const button = document.createElement('button')
          button.className = 'retirer'
          button.id = `${i}-remove`
          button.addEventListener('click', function() {
              cart.splice(i, 1)
              renderAchats()
          })
          controle.appendChild(button)
          achat.appendChild(controle)
          achats.appendChild(achat)
          montant += product.price * qty
      }
      document.getElementById('montant').innerText = montant
      const panier = document.getElementById('panier')
      panier.removeChild(document.getElementById('achats'))
      panier.appendChild(achats)
  }
  const addProductToCart = function (index, qty) {
    const product = catalog[index]
    const findCart = cart.find(ct => ct.name === product.name)
    if (!findCart) cart.push({ product, qty })
    else findCart.qty += qty
    cart = cart.filter((value, index, arr) => arr.findIndex(ct => ct.name === value.name) === index)
    renderAchats()
}

Q10

const filterDisplaidProducts = function () {
    const { value } = this
    const shop = document.getElementById('boutique')
    shop.textContent = ''
    const realCatalog = catalog.filter(ct => ct.name.toUpperCase().indexOf(value.toUpperCase()) !== -1)
    for(let i = 0; i < realCatalog.length; i++) {
        shop.appendChild(createProduct(realCatalog[i], i));
    }
}

Q11
LocalStorage

const cart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : []

const addProductToCart = function (index, qty) {
    const product = catalog[index]
    const findCart = cart.find(ct => ct.name === product.name)
    if (!findCart) cart.push({ product, qty })
    else findCart.qty += qty
    cart = cart.filter((value, index, arr) => arr.findIndex(ct => ct.name === value.name) === index)
    renderAchats()
    localStorage.setItem('cart', JSON.stringify(cart))
}

Avec ça tu devrais t'en sortir. Je n'ai pas testé le code.

le code complet ici (Test ok) :

// VOTRE NOM A COMPLETER ICI

// ===  variables globales === 

// constantes
const MAX_QTY = 9;

//  tableau des produits à acheter
let cart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : []
// total actuel des produits dans le panier
let total = 0;

// === initialisation au chargement de la page ===

/**
* Création du Magasin, mise à jour du total initial
* Mise en place du gestionnaire d'événements sur filter
*/
const init = function () {
    createShop();
    updateTotal();
    const filter = document.getElementById("filter");
    filter.addEventListener("keyup", filterDisplaidProducts);
    renderAchats()
}
window.addEventListener("load", init);

// ==================== fonctions utiles ======================= 

/**
* Crée et ajoute tous les éléments div.produit à l'élément div#boutique
* selon les objets présents dans la variable 'catalog'
*/
const createShop = function () {
    const shop = document.getElementById("boutique");
    for(let i = 0; i < catalog.length; i++) {
        shop.appendChild(createProduct(catalog[i], i));
    }
}

/**
* Crée un élément div.produit qui posséde un id de la forme "i-produit" où l'indice i 
* est correpond au paramètre index
* @param {Object} product - le produit pour lequel l'élément est créé
* @param {number} index - l'indice (nombre entier) du produit dans le catalogue (utilisé pour l'id)
* @return {Element} une div.produit
*/
const createProduct = function (product, index) {
    // créer la div correpondant au produit
    const divProd = document.createElement("div");
    divProd.className = "produit";
    // fixe la valeur de l'id pour cette div
    divProd.id = index + "-product";
    // crée l'élément h4 dans cette div
    divProd.appendChild(createBlock("h4", product.name));

    // Ajoute une figure à la div.produit... 
    // /!\ non fonctionnel tant que le code de createFigureBlock n'a pas été modifié /!\ 
    divProd.appendChild(createFigureBlock(product));

    // crée la div.description et l'ajoute à la div.produit
    divProd.appendChild(createBlock("div", product.description, "description"));
    // crée la div.prix et l'ajoute à la div.produit
    divProd.appendChild(createBlock("div", product.price, "prix"));
    // crée la div.controle et l'ajoute à la div.produit
    divProd.appendChild(createOrderControlBlock(index));
    return divProd;
}

/** Crée un nouvel élément avec son contenu et éventuellement une classe
 * @param {string} tag - le type de l'élément créé (example : "p")
 * @param {string} content - le contenu html de l'élément a créé  (example : "bla bla")
 * @param {string} [cssClass] - (optionnel) la valeur de l'attribut 'classe' de l'élément créé
 * @return {Element} élément créé
 */
const createBlock = function (tag, content, cssClass) {
    const element = document.createElement(tag);
    if (cssClass != undefined) {
        element.className =  cssClass;
    }
    element.innerHTML = content;
    return element;
}

/** Met à jour le montant total du panier en utilisant la variable globale total
 */
const updateTotal = function () {
    const montant = document.getElementById("montant");
    montant.textContent = total;
}

// ======================= fonctions à compléter =======================

/**
* Crée un élément div.controle pour un objet produit
* @param {number} index - indice du produit considéré
* @return {Element}
* TODO : AJOUTER les gestionnaires d'événements
*/
const createOrderControlBlock = function (index) {
    const control = document.createElement("div");
    control.className = "controle";

    // crée l'élément input permettant de saisir la quantité
    const input = document.createElement("input");
    input.id = index + "-qte";
    input.type = "number";
    input.step = "1";
    input.value = "0";
    input.min = "0";
    input.max = MAX_QTY.toString();
    control.appendChild(input);

    // Crée le bouton de commande
    const button = document.createElement("button");
    button.className = 'commander';
    button.id = index + "-order";
    control.appendChild(button);

    input.addEventListener('change', function (event) {
        const { value } = event?.target || {}
        const isValid = verifQuantity(value)
        this.value = isValid ? value : '0'
        button.style.opacity = isValid ? 1 : 0.3
        button.disabled = !isValid
    })

    button.addEventListener('click', function () {
        orderProduct.call({ id: index })
    })

    return control;
}

/** 
* Crée un élément figure correspondant à un produit
* @param {Object} product -  le produit pour lequel la figure est créée
* @return {Element}
*/
const createFigureBlock = function (product) {
    const figure = document.createElement("figure")
    const img = document.createElement("img")
    img.src = product.image
    img.alt = product.name
    figure.appendChild(img)
    return figure
}

/** 
* @todo Q8
*/

 function orderProduct() {
    const idx = parseInt(this.id);
    const qty = parseInt(document.getElementById(idx + "-qte").value);
    if (qty > 0) {
        addProductToCart(idx, qty); // ajoute un produit au panier
        document.getElementById(`${idx}-qte`).value = '0'
        document.getElementById(`${idx}-order`).disabled = true
        document.getElementById(`${idx}-order`).style.opacity = 0.3
    }
}

// ======================= fonctions à coder =======================

/**
* @todo Q6- Q7
*/
function verifQuantity (value) {
    return !`${value}`.match(/\D/) && !isNaN(value) && value != 0
}

function renderAchats() {
    const achats = document.createElement('div')
    achats.className = 'achats'
    let montant = 0
    for (let i=0; i<cart.length; i++) {
        const achat = document.createElement('div')
        achat.className = 'achat'
        achat.id = `${i}-achat`
        const { product, qty } = cart[i]
        achat.appendChild(createFigureBlock(product))
        achat.appendChild(createBlock('h4', product.name))
        achat.appendChild(createBlock('div', qty, 'quantite'))
        achat.appendChild(createBlock('div', product.price, 'prix'))
        const controle = document.createElement('div')
        controle.className = 'controle'
        const button = document.createElement('button')
        button.className = 'retirer'
        button.id = `${i}-remove`
        button.addEventListener('click', function() {
            cart.splice(i, 1)
            renderAchats()
        })
        controle.appendChild(button)
        achat.appendChild(controle)
        achats.appendChild(achat)
        montant += product.price * qty
    }
    document.getElementById('montant').innerText = montant
    const panier = document.getElementById('panier')
    const currentAchat = document.querySelector('.achats')
    if (currentAchat) panier.removeChild(currentAchat)
    panier.appendChild(achats)
    localStorage.setItem('cart', JSON.stringify(cart))
}

/**
* @todo Q9
* @param {number} index
* @param {number} qty
*/
const addProductToCart = function (index, qty) {
    const { value } = document.getElementById("filter");
    const realCatalog = catalog.filter(ct => ct.name.toUpperCase().indexOf(value.toUpperCase()) !== -1)
    const product = realCatalog[index]
    const findCart = cart.find(ct => ct.product.name === product.name)
    if (!findCart) cart.push({ product, qty })
    else findCart.qty += qty
    renderAchats()
}

/**
* @todo Q10
*/
const filterDisplaidProducts = function () {
    const { value } = this
    const shop = document.getElementById('boutique')
    shop.textContent = ''
    const realCatalog = catalog.filter(ct => ct.name.toUpperCase().indexOf(value.toUpperCase()) !== -1)
    for(let i = 0; i < realCatalog.length; i++) {
        shop.appendChild(createProduct(realCatalog[i], i));
    }
}