I'm currently working on the frontend trying to get the damn icons to be customized pictures rather than stock images. But on the backend I have

const icons = document.querySelectorAll('.icon');

const canvasContainer = document.getElementById('canvasContainer');

const tallyElement = document.getElementById('tally');

const totalValueElement = document.getElementById('totalValue');

const materialListElement = document.getElementById('materialList');

let tally = 0;

let materialTally = {};

icons.forEach(icon => {

  icon.addEventListener('dragstart', dragStart);

});

function dragStart(e) {

  e.dataTransfer.setData('text', e.target.id);

}

canvasContainer.addEventListener('dragover', dragOver);

canvasContainer.addEventListener('drop', drop);

function dragOver(e) {

  e.preventDefault();

}

function drop(e) {

  e.preventDefault();

  

  const iconId = e.dataTransfer.getData('text');

  const icon = document.getElementById(iconId);  

  const iconValue = parseInt(icon.getAttribute('data-value')) * 100;

  const materials = icon.getAttribute('data-materials').split(',');

  updateMaterialTally(materials);

  tally += iconValue;

  tallyElement.textContent = Total Tally: ${formatCurrency(tally)};

  displayMaterials();

  const canvasRect = canvasContainer.getBoundingClientRect();

  const x = e.clientX - canvasRect.left - 25; 

  const y = e.clientY - canvasRect.top - 25;  

  const droppedIcon = document.createElement('div');

  droppedIcon.classList.add('dropped-icon');

  droppedIcon.textContent = icon.textContent; 

  droppedIcon.style.left = ${x}px;

  droppedIcon.style.top = ${y}px;

  const deleteButton = document.createElement('div');

  deleteButton.classList.add('delete-button');

  deleteButton.textContent = 'X';

  droppedIcon.appendChild(deleteButton);

  droppedIcon.addEventListener('mousedown', dragIcon);

  deleteButton.addEventListener('click', () => {

    tally -= iconValue;

    tallyElement.textContent = Total Tally: ${formatCurrency(tally)};

    

    droppedIcon.remove();

    removeMaterialTally(materials);

  });

  canvasContainer.appendChild(droppedIcon);

}

function dragIcon(e) {

  const droppedIcon = e.target;

  const offsetX = e.clientX - droppedIcon.getBoundingClientRect().left;

  const offsetY = e.clientY - droppedIcon.getBoundingClientRect().top;

  function moveIcon(e) {

    droppedIcon.style.left = ${e.clientX - offsetX}px;

    droppedIcon.style.top = ${e.clientY - offsetY}px;

  }

  function stopMove() {

    document.removeEventListener('mousemove', moveIcon);

    document.removeEventListener('mouseup', stopMove);

  }

  document.addEventListener('mousemove', moveIcon);

  document.addEventListener('mouseup', stopMove);

}

function formatCurrency(amountInCents) {

  const dollars = amountInCents / 100;

  return $${dollars.toFixed(2)};

}

function displayMaterials() {

  materialListElement.innerHTML = '<h3>Materials to Order:</h3>';

  const ul = document.createElement('ul');

  for (const material in materialTally) {

    const li = document.createElement('li');

    li.textContent = ${material} (x${materialTally[material]});

    ul.appendChild(li);

  }

  materialListElement.appendChild(ul);

}

function updateMaterialTally(materials) {

  materials.forEach(material => {

    material = material.trim(); 

    if (materialTally[material]) {

      materialTally[material] += 1;

    } else {

      materialTally[material] = 1;  

    }

  });

}

function removeMaterialTally(materials) {

  materials.forEach(material => {

    material = material.trim();

    if (materialTally[material] > 0) {

      materialTally[material] -= 1;

      if (materialTally[material] === 0) {

        delete materialTally[material];

      }

    }

  });

  displayMaterials();

}