JavaScript del proyecto Carrito de compra

// Variables
const carrito = document.querySelector('#carrito');
const listaCursos = document.querySelector('#lista-cursos');
const contenedorCarrito = document.querySelector('#lista-carrito tbody');
const vaciarCarritoBtn = document.querySelector('#vaciar-carrito'); 
let articulosCarrito = [];

// Listeners
cargarEventListeners();

function cargarEventListeners() {
     // Dispara cuando se presiona "Agregar Carrito"
     listaCursos.addEventListener('click', agregarCurso);

     // Cuando se elimina un curso del carrito
     carrito.addEventListener('click', eliminarCurso);

     // Mandar a traer el arreglo articulosCarrito del local soreage si hubiera datos allí
     document.addEventListener( 'DOMContentLoaded', () => {
          articulosCarrito = JSON.parse(localStorage.getItem('carrito')) || [];

          carritoHTML();
     })

     // Al Vaciar el carrito
     vaciarCarritoBtn.addEventListener('click', vaciarCarrito);
}

// Funciones
// Función que añade el curso al carrito
function agregarCurso(e) {
     e.preventDefault();   //Prevenir el bendito default
     // Delegation para agregar-carrito
     if(e.target.classList.contains('agregar-carrito')) {  //Verifica que el elemento al que se hace clic tenga la clase "agregar carrito"
                                                            //porque el listener está puesto para todo el card
          const cursoConst = e.target.parentElement.parentElement; //Luego sobimos dos elementos hacia arriba para tener el div que tiene toda la info
          console.log(e.target);
          // Enviamos el curso seleccionado para tomar sus datos
          leerDatosCurso(cursoConst); //Llamamos la funcién que lee los datos del curso y le pasamos el div con todo la info
     }
}

// Lee los datos del curso
function leerDatosCurso(curso) { //Crea un objeto con los datos del curso
     const infoCurso = {           //querySelector va a tomar la info solo del div que se está usndo
          imagen: curso.querySelector('img').src,
          titulo: curso.querySelector('h4').textContent,
          precio: curso.querySelector('.precio span').textContent,
          id: curso.querySelector('a').getAttribute('data-id'), 
          cantidad: 1
     }
               //Lo siguiente es para aumentar la cantidad mas no agregar un curso repetido
     if( articulosCarrito.some( cursoSome => cursoSome.id === infoCurso.id ) ) { 
          const cursos = articulosCarrito.map( cursoMap => {
               if( cursoMap.id === infoCurso.id ) {
                    cursoMap.cantidad++;
                     return cursoMap;
                } else {
                     return cursoMap;
             }
          })
          articulosCarrito = [...cursos];
     }  else {
          articulosCarrito = [...articulosCarrito, infoCurso];
     }

     // console.log(articulosCarrito)

     // console.log(articulosCarrito)
     carritoHTML();
}

// Elimina el curso del carrito en el DOM
function eliminarCurso(e) {
     e.preventDefault();
     if(e.target.classList.contains('borrar-curso') ) {
          // e.target.parentElement.parentElement.remove();
          const cursoId = e.target.getAttribute('data-id')
          
          // Eliminar del arreglo del carrito
          articulosCarrito = articulosCarrito.filter(cursoFilter => cursoFilter.id !== cursoId);

          carritoHTML();
     }
}

// Muestra el curso seleccionado en el Carrito
function carritoHTML() {

     vaciarCarrito();

     articulosCarrito.forEach(curso => {
          const row = document.createElement('tr');
          row.innerHTML = `
               <td>  
                    <img src="${curso.imagen}" width=100>
               </td>
               <td>${curso.titulo}</td>
               <td>${curso.precio}</td>
               <td>${curso.cantidad} </td>
               <td>
                    <a href="#" class="borrar-curso" data-id="${curso.id}">X</a>
               </td>
          `;
          contenedorCarrito.appendChild(row);
     });

     //Para agregar esos datos a local storage a modo de ponerle más periquitos al código llamo a una función para que haga eso
     sincronizarStorage();
}
//Manda lo que está en el arreglo principal articulosCarrito al local storage
function sincronizarStorage() {
     localStorage.setItem('carrito', JSON.stringify(articulosCarrito));
}

// Elimina los cursos del carrito en el DOM
function vaciarCarrito() {
     // forma lenta
     // contenedorCarrito.innerHTML = '';

     // forma rapida (recomendada)
     while(contenedorCarrito.firstChild) {
          contenedorCarrito.removeChild(contenedorCarrito.firstChild);
      }
}