pure Typescript,html,css

Community feedback

• 

  Julio Garcia•270

  @julioedi

  Posted about 1 month ago

  You are re-rendering everything every time you do an action, You could try to render again just the Add cart| - # + part, that's to prevent the visual glitch.

  If you check the network part in inspector mode, every action makes a new call for each image.

  Maybe you can instead use a plain string, create an array of DOM elements using document.createElement, that way just modify the actual action item.

  interface singleItem{
    element: HTMLDivElement,
    currentTotal: number,
    increase:() => void,
    decrease:() => void,
    index: number
  }
  const ItemsList:singleItem= []; //here you store the items;
  const area = 
  const createElement = (item: item):singleItem =>{
    let index = ItemsList.Length;
    const data = {
     element: document.createElement("div"),
     currentTotal: 0,
     index,
     increase: () => {data.currentTotal++},
     decrease: () => {data.currentTotal = data.currentTotal - 1}
    }
    data.element.className = `meal ${index}`,
    data.element.innerHTML = ...your code;
    const control = data.element.querySelector(".quantity-controls");
   ...
   ItemsList.push(data)
   itemArea.appendChild(data.element)
  }
  

  00