Comunidad. Espero estén bien. Estoy poniendo un poco de estilo a este ecommerce, estoy usando flexbox para hacer la card responsive... creo las clases de estilos para las mismas, pero no sé como aplicarlas al HTML que creo desde Javascript, sé que poniendo div.Producto.classList.add se les agrega estilos a todos los div creados, pero cada div lleva clases diferentes, por ende si les agrego clases de esa forma se termina pisando todo y no queda nada bien... ¿de qué manera podría agregar estilos de manera individual para cada div desde Javascript? ¿me podrían ayudar por favor? Gracias
class Celulares {
constructor( id, modelo, color, precio , img) {
this.id = id ;
this.modelo = modelo;
this.color = color;
this.precio = parseInt(precio);
this.img = img ;
}
}
// Aplicando ARRAY y sus metodos
const productos = [];
productos.push (new Celulares ( 3 , "SAMSUNG GALAXY J2" , "GRIS" , 10000,'img/GALAXY J2 PRIME.jpg'));
productos.push(new Celulares ( 4, "LG LK22" , "GRIS" , 20000 ,"img/LGLK22.jpg") );
productos.push(new Celulares ( 5, "MOTO G100" , "AZUL" , 85000,"img/MOTOG100.jpg"));
productos.push(new Celulares( 6, "ALCATEL L1" ,"NEGRO" , 7000,"img/ALCATEL L1 NEGRO.jpg"));
productos.push(new Celulares (7, "SAMSUNG J1" ,"BLANCO" , 7000,"img/J1 PRIME.jpg"));
productos.push(new Celulares (8, "SAMSUNG J3 PRIME", "GRIS" , 14000,"img/GALAXYU J3.jpg"));
productos.push(new Celulares (9, "SAMSUNG A51" , "BLANCO" ,45000,"img/A51.jpg"));
productos.push(new Celulares (10,"MOTOROLA E7 " , "NEGRO" , 22000,"img/MOTOE7.jpg"));
productos.push(new Celulares (11 , "LG Q7" , "NEGRO" , 34500,"img/LG Q7.jpg"));
productos.push(new Celulares (12 , "IPHONE 11 PRO" , "GRIS" , 283500,"img/IPHONE 11.jpg"));
productos.push(new Celulares (13 , "IPHONE SE 128" , "BLANCO" , 161840,"img/IPHONE SE.jpg"));
console.log(productos);
for (const producto of productos) {
let divProducto = document.createElement("div");
divProducto.innerHTML = `<h2 class =" card" > ${producto.modelo}</h2>
<h3 class =" card" > ${producto.color} </h3>
<h4 class ="card" >$${producto.precio}</h4>
<img class =" container card img" src="${producto.img}" >
<button id="${producto.id}" class=" btn btn-danger">COMPRAR</button>`;
document.getElementById("productoC").appendChild(divProducto);
}
const botones = document.getElementsByClassName(" btn btn-danger");
console.log(botones);
//CARRITO
const carrito = [];
function comprarManejador(event){
const seleccionado = productos.find(producto => producto.id == this. id);
carrito.push(seleccionado);
console.log(carrito);
localStorage.setItem("carrito" , JSON.stringify(carrito));
const divCarrito = document.getElementById("carrito");
divCarrito.innerHTML="";
for (const producto of carrito) {
let item = document.createElement("p")
item.innerHTML =`Articulo seleccionado : ${producto.modelo} ${producto.precio}`;
divCarrito.appendChild(item);
}
}
for (const boton of botones) {
boton.addEventListener("click" , comprarManejador);
}
// BARRA NAVEGACION
const navToggle = document.querySelector(".nav-toggle")
const navMenu = document.querySelector(".nav-menu")
navToggle.addEventListener("click",() =>{
navMenu.classList.toggle("nav-menu_visible");
if(navMenu.classList.contains("nav-menu_visible")){
navToggle.setAttribute("aria-label" , "Cerrar menu");
}
else{
navToggle.setAttribute("aria-label" , "abrir menu")
}
}
);