├── css └── styles.css ├── img ├── platillo1.jpg ├── platillo2.jpg ├── platillo3.jpg ├── platillo4.jpg └── platillo5.jpg ├── index.html └── js └── scripts.js /css/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #110f0fea; 3 | } 4 | header, .alert{ 5 | z-index: 100; 6 | } 7 | .description{ 8 | height: 25px; 9 | overflow: hidden; 10 | transition: height .3s ease-in .3s; 11 | } 12 | .description:hover{ 13 | height: 80px; 14 | } 15 | .carrito{ 16 | min-height: 80vh; 17 | max-width: 1000px; 18 | margin: 0 auto; 19 | width: 100%; 20 | } 21 | .table__productos{ 22 | display: flex; 23 | } 24 | .table__productos > img{ 25 | width: 9rem; 26 | object-fit: contain; 27 | border-radius: 6px; 28 | margin-right: 20px; 29 | } 30 | .table__cantidad > input{ 31 | width: 40px; 32 | border: none; 33 | outline: 0; 34 | font-size: 16px; 35 | font-weight: 700; 36 | margin-right: 30px; 37 | margin-bottom: 20px; 38 | } 39 | .hide, .remove{ 40 | display: none; 41 | } -------------------------------------------------------------------------------- /img/platillo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jehingson/vanilla-javascript/fb5d21b0711cfb71969893fc7741768a99c347fe/img/platillo1.jpg -------------------------------------------------------------------------------- /img/platillo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jehingson/vanilla-javascript/fb5d21b0711cfb71969893fc7741768a99c347fe/img/platillo2.jpg -------------------------------------------------------------------------------- /img/platillo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jehingson/vanilla-javascript/fb5d21b0711cfb71969893fc7741768a99c347fe/img/platillo3.jpg -------------------------------------------------------------------------------- /img/platillo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jehingson/vanilla-javascript/fb5d21b0711cfb71969893fc7741768a99c347fe/img/platillo4.jpg -------------------------------------------------------------------------------- /img/platillo5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jehingson/vanilla-javascript/fb5d21b0711cfb71969893fc7741768a99c347fe/img/platillo5.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vanilla Javascript 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 |
23 | 68 |
69 | 70 | 73 | 76 | 77 |
78 |
84 | 1 85 |
86 |
92 |

Productos

93 | 94 |
95 | 96 |
97 |
98 |
Card title 1
99 | ... 100 |
101 |

Some quick example text to build on the card title and make up the bulk of the card's content.

102 |
Precio: $ 5
103 |
104 | 105 |
106 |
107 |
108 |
109 |
110 |
111 |
Card title 2
112 | ... 113 |
114 |

Some quick example text to build on the card title and make up the bulk of the card's content.

115 |
Precio: $ 5
116 |
117 | 118 |
119 |
120 |
121 |
122 |
123 |
124 |
Card title 3
125 | ... 126 |
127 |

Some quick example text to build on the card title and make up the bulk of the card's content.

128 |
Precio: $ 5
129 |
130 | 131 |
132 |
133 |
134 |
135 |
136 |
137 |
Card title 4
138 | ... 139 |
140 |

Some quick example text to build on the card title and make up the bulk of the card's content.

141 |
Precio: $ 5
142 |
143 | 144 |
145 |
146 |
147 |
148 |
149 |
150 |
Card title 5
151 | ... 152 |
153 |

Some quick example text to build on the card title and make up the bulk of the card's content.

154 |
Precio: $ 5
155 |
156 | 157 |
158 |
159 |
160 |
161 |
162 |
163 |
Card title 6
164 | ... 165 |
166 |

Some quick example text to build on the card title and make up the bulk of the card's content.

167 |
Precio: $ 5
168 |
169 | 170 |
171 |
172 |
173 |
174 |
175 |
176 |
Card title 7
177 | ... 178 |
179 |

Some quick example text to build on the card title and make up the bulk of the card's content.

180 |
Precio: $ 5
181 |
182 | 183 |
184 |
185 |
186 |
187 |
188 |
189 |
Card title 8
190 | ... 191 |
192 |

Some quick example text to build on the card title and make up the bulk of the card's content.

193 |
Precio: $ 5
194 |
195 | 196 |
197 |
198 |
199 |
200 | 201 | 202 |
203 | 204 |
205 |
211 |
212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 |
#ProductosPrecioCantidad
227 |

228 |
229 |
230 |

Total: 0

231 |
232 |
233 | 234 |
235 |
236 | 237 |
238 |
239 | 240 | 243 | 244 | 249 | 250 | 255 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | const Clickbutton = document.querySelectorAll('.button') 2 | const tbody = document.querySelector('.tbody') 3 | let carrito = [] 4 | 5 | Clickbutton.forEach(btn => { 6 | btn.addEventListener('click', addToCarritoItem) 7 | }) 8 | 9 | 10 | function addToCarritoItem(e){ 11 | const button = e.target 12 | const item = button.closest('.card') 13 | const itemTitle = item.querySelector('.card-title').textContent; 14 | const itemPrice = item.querySelector('.precio').textContent; 15 | const itemImg = item.querySelector('.card-img-top').src; 16 | 17 | const newItem = { 18 | title: itemTitle, 19 | precio: itemPrice, 20 | img: itemImg, 21 | cantidad: 1 22 | } 23 | 24 | addItemCarrito(newItem) 25 | } 26 | 27 | 28 | function addItemCarrito(newItem){ 29 | 30 | const alert = document.querySelector('.alert') 31 | 32 | setTimeout( function(){ 33 | alert.classList.add('hide') 34 | }, 2000) 35 | alert.classList.remove('hide') 36 | 37 | const InputElemnto = tbody.getElementsByClassName('input__elemento') 38 | for(let i =0; i < carrito.length ; i++){ 39 | if(carrito[i].title.trim() === newItem.title.trim()){ 40 | carrito[i].cantidad ++; 41 | const inputValue = InputElemnto[i] 42 | inputValue.value++; 43 | CarritoTotal() 44 | return null; 45 | } 46 | } 47 | 48 | carrito.push(newItem) 49 | 50 | renderCarrito() 51 | } 52 | 53 | 54 | function renderCarrito(){ 55 | tbody.innerHTML = '' 56 | carrito.map(item => { 57 | const tr = document.createElement('tr') 58 | tr.classList.add('ItemCarrito') 59 | const Content = ` 60 | 61 | 1 62 | 63 | 64 |
${item.title}
65 | 66 |

${item.precio}

67 | 68 | 69 | 70 | 71 | 72 | ` 73 | tr.innerHTML = Content; 74 | tbody.append(tr) 75 | 76 | tr.querySelector(".delete").addEventListener('click', removeItemCarrito) 77 | tr.querySelector(".input__elemento").addEventListener('change', sumaCantidad) 78 | }) 79 | CarritoTotal() 80 | } 81 | 82 | function CarritoTotal(){ 83 | let Total = 0; 84 | const itemCartTotal = document.querySelector('.itemCartTotal') 85 | carrito.forEach((item) => { 86 | const precio = Number(item.precio.replace("$", '')) 87 | Total = Total + precio*item.cantidad 88 | }) 89 | 90 | itemCartTotal.innerHTML = `Total $${Total}` 91 | addLocalStorage() 92 | } 93 | 94 | function removeItemCarrito(e){ 95 | const buttonDelete = e.target 96 | const tr = buttonDelete.closest(".ItemCarrito") 97 | const title = tr.querySelector('.title').textContent; 98 | for(let i=0; i { 121 | if(item.title.trim() === title){ 122 | sumaInput.value < 1 ? (sumaInput.value = 1) : sumaInput.value; 123 | item.cantidad = sumaInput.value; 124 | CarritoTotal() 125 | } 126 | }) 127 | } 128 | 129 | function addLocalStorage(){ 130 | localStorage.setItem('carrito', JSON.stringify(carrito)) 131 | } 132 | 133 | window.onload = function(){ 134 | const storage = JSON.parse(localStorage.getItem('carrito')); 135 | if(storage){ 136 | carrito = storage; 137 | renderCarrito() 138 | } 139 | } --------------------------------------------------------------------------------