├── README.md ├── js └── app.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # lista-de-compras 2 | Lista de compras 3 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const botonHamburguesa = document.querySelector("#hamburguesas"); 2 | const bebidas = document.querySelector("#bebidas") 3 | botonHamburguesa.addEventListener("click", (e) => valorProducto(e.target.id, precios)) 4 | 5 | 6 | bebidas.onclick = (e) => { 7 | valorProducto(e.target.id, precios) 8 | } 9 | let total = []; 10 | const precios = { 11 | precio1 : 21000, 12 | precio2 : 23000, 13 | precio3: 25000, 14 | precio4: 8000, 15 | precio5: 3000, 16 | precio6: 3500 17 | } 18 | 19 | function valorProducto(value, precios){ 20 | const {precio1, precio2, precio3, precio4, precio5, precio6} = precios; 21 | 22 | if(value == "op1"){ 23 | mostrarHTML("Hamburguesa 300gr $" , precio1) 24 | total.push(precio1) 25 | 26 | }else if(value == "op2"){ 27 | mostrarHTML("Hamburguesa mixta $", precio2) 28 | total.push(precio2) 29 | }else if(value == "op3"){ 30 | mostrarHTML("Hamburguesa crispy $", precio3) 31 | total.push(precio3) 32 | }else if(value == "op4"){ 33 | mostrarHTML("Cerveza $", precio4) 34 | total.push(precio4) 35 | }else if(value == "op5"){ 36 | mostrarHTML("Gaseosa $", precio5) 37 | total.push(precio5) 38 | }else if(value == "op6"){ 39 | mostrarHTML("Botella de agua $", precio6) 40 | total.push(precio6) 41 | } 42 | 43 | mostrarTotal(total); 44 | 45 | console.log(total) 46 | 47 | } 48 | 49 | function mostrarHTML(mensaje, precio){ 50 | 51 | const resultado = document.querySelector("#resultado"); 52 | const parrafo = document.createElement("P"); 53 | parrafo.classList.add("fs-5") 54 | parrafo.textContent = `${mensaje} ${precio}`; 55 | resultado.appendChild(parrafo); 56 | 57 | 58 | 59 | }; 60 | 61 | function mostrarTotal(total){ 62 | console.log(total) 63 | let totalPagar = 0; 64 | total.forEach(element => totalPagar += element ) 65 | console.log(parseInt(totalPagar)) 66 | const totalP = document.querySelector("#total-pagar"); 67 | const pafTotal = document.createElement("P"); 68 | pafTotal.classList.add("fs-4", "fw-bold") 69 | pafTotal.textContent = `Total a pagar: ${totalPagar}`; 70 | limpiarHTML() 71 | totalP.appendChild(pafTotal); 72 | 73 | } 74 | 75 | function limpiarHTML(){ 76 | const totalP = document.querySelector("#total-pagar"); 77 | while(totalP.firstChild){ 78 | totalP.removeChild(totalP.firstChild) 79 | } 80 | 81 | } 82 | 83 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |

Burguers

14 | 15 |
16 | 17 |
18 |
19 |
20 |

Escoje tu hamburguesa

21 |
22 | 23 | 26 |
27 |
28 | 29 | 32 |
33 |
34 | 35 | 38 |
39 | 40 |
41 |
42 |

Escoje tu bebida

43 |
44 | 45 | 48 |
49 |
50 | 51 | 54 |
55 |
56 | 57 | 60 |
61 | 62 |
63 |
64 |
65 |
66 |

Tu pedido

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 | --------------------------------------------------------------------------------