curso-frontend-developer-javascript-practico/main.js at fdd117faed4b5309be69a155042e36eea51ff7ab · juandc/curso-frontend-developer-javascript-practico · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const menuBurguer = document.querySelector('.menu');
const mobileMenu = document.querySelector('.mobile-menu');
const menuCart = document.querySelector('.navbar-shopping-cart');
const aside = document.querySelector('.product-detail');
const cardsContainer = document.querySelector('.cards-container');
const productCartDetail = document.querySelector('.product-cart-detail');
const btnCloseProductCartDetail = document.querySelector('.product-detail-close');


menuEmail.addEventListener('click', toggleDesktop);
menuBurguer.addEventListener('click', toggleMobile);
menuCart.addEventListener('click', toggleAside);

function toggleDesktop() {
  desktopMenu.classList.toggle('inactive');
}

function toggleMobile() {
  const isAsideOpen = aside.classList.contains('inactive');
  productCartDetail.classList.add('inactive');

  if(!isAsideOpen){
    aside.classList.add('inactive');
  }
  mobileMenu.classList.toggle('inactive');
}

function toggleAside() {
  const isMobileMenuOpen = mobileMenu.classList.contains('inactive');
  const isProductDetailOpen = productCartDetail.classList.contains('inactive');

  if(!isMobileMenuOpen){
    mobileMenu.classList.add('inactive');
  }
  if(!isProductDetailOpen){
    productCartDetail.classList.add('inactive');
  }


  aside.classList.toggle('inactive');
}


function openProductDetail(){
  aside.classList.add('inactive');
  productCartDetail.classList.remove('inactive');
}

function closeProductDetail(){
  productCartDetail.classList.add('inactive');
}

btnCloseProductCartDetail.addEventListener('click', closeProductDetail);


const productList = [];

productList.push({
  name: 'Bike',
  price: 120,
  image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',

})

productList.push({
  name: 'Computer',
  price: 840,
  image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',

})

productList.push({
  name: 'Alexa',
  price: 40,
  image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',

})


for (product of productList){
  const productCard = document.createElement('div');
  productCard.setAttribute('class', 'product-card');

  const imageProduct = document.createElement('img');
  imageProduct.setAttribute('src', product.image);
  imageProduct.addEventListener('click', openProductDetail);

  const infoProduct = document.createElement('div');
  infoProduct.setAttribute('class', 'product-info');

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

  const pPrecio = document.createElement('p');
  pPrecio.innerHTML = '$ ' + product.price;
  const pNombre = document.createElement('p');
  pNombre.innerHTML = product.name;

  const figCart = document.createElement('figure');
  const imgCart = document.createElement('img');

  imgCart.setAttribute('src','./icons/bt_add_to_cart.svg')

  cardsContainer.append(productCard);
  productCard.append(imageProduct);
  productCard.append(infoProduct);
  infoProduct.append(divPrecio);
  infoProduct.append(figCart);
  divPrecio.append(pPrecio);
  divPrecio.append(pNombre);
  figCart.append(imgCart);
}