Logica en Javascript lista

index.html

@@ -50,23 +50,28 @@
                         <table id="products-display-checkout">
                             <thead>
                                 <tr>
-                            <th>
-                                Cantidad
-                            </th>
-                            <th>
-                                Producto
-                            </th>
-                            <th>
-                                Tax
-                            </th>
-                            <th>
-                                Total
-                            </th>
-                        </tr>
-                        </thead>
+                                    <th>
+                                        Cantidad
+                                    </th>
+                                    <th>
+                                        Producto
+                                    </th>
+                                    <th>
+                                        Tax
+                                    </th>
+                                    <th>
+                                        Total
+                                    </th>
+                                    <th id="blank-space">
+                                        
+                                    </th>
+                                </tr>
+                            </thead>
                         
                         <tbody>
-                            <tr>
+
+                            <!--! Template -->
+                            <!-- <tr>
                                 <td>
                                     1
                                     <button class="button">
@@ -89,7 +94,7 @@
                                 <td>
                                     <img src="./img/eliminar.png" alt="trash-icon" class="button">
                                 </td>
-                            </tr>
+                            </tr> -->
                         </tbody>
                     </table>
                 </div>
@@ -98,7 +103,7 @@
                 
                 <div class="total-container">
                     <span class="total">TOTAL</span>
-                    <span class="precio">0</span>
+                    <span class="precio" id="precio">0</span>
                     <span class="moneda">$</span>
                 </div>
             </div>
@@ -145,51 +150,17 @@
                 
                 <div class="productos">
 
-                    <div class="producto button">
-                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
-                        
-                        <div class="text">
-                            <span class="name">COCA-COLA</span>
-                            <span class="price">15 USD</span>
+                    <!-- !TEMPLATE: 
+                        <div class="producto button">
+                            <img src="./img/cocacola-lata.jpg" alt="coca cola">
+                            
+                            <div class="text">
+                                <span class="name">COCA-COLA</span>
+                                <span class="price">15 USD</span>
+                            </div>
                         </div>
+                    !-->
                     </div>
-
-                    <div class="producto button">
-                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
-                        
-                        <div class="text">
-                            <span class="name">COCA-COLA</span>
-                            <span class="price">15 USD</span>
-                        </div>
-                    </div>
-
-                    <div class="producto button">
-                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
-                        
-                        <div class="text">
-                            <span class="name">COCA-COLA</span>
-                            <span class="price">15 USD</span>
-                        </div>
-                    </div>
-
-                    <div class="producto button">
-                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
-                        
-                        <div class="text">
-                            <span class="name">COCA-COLA</span>
-                            <span class="price">15 USD</span>
-                        </div>
-                    </div>
-
-                    <div class="producto button">
-                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
-                        
-                        <div class="text">
-                            <span class="name">COCA-COLA</span>
-                            <span class="price">15 USD</span>
-                        </div>
-                    </div>
-                </div>
             </div>
 
             
@@ -236,5 +207,14 @@
         </div>
     </div>    
     </div>
+    
+<!-- !Template: 
+    <div id="mensaje-compra-container">
+        <div id="mensaje-compra">
+            <h2></h2>
+        </div>
+    </div> -->
+
 </body>
+    <script src="./scripts/script.js" type="module"></script>
 </html>

scripts/script.js

@@ -0,0 +1,341 @@
+//? GLOBAL
+
+let activeCategory = 'BEBIDAS'
+let checkout = {}
+let globalProductos = []
+
+const userName = document.getElementById('perfil-nombre')
+      userName.innerText = userName.innerText.toUpperCase()
+
+//! Productos Logica
+
+import traerProductosDeAPI from './traerProductosDeAPI.js'
+
+const traerData = async ()  => {
+   
+    return await traerProductosDeAPI()
+}
+
+const productsAPI = await traerData()
+
+class product {
+
+    constructor(productObject) {
+
+        this.nombre = productObject.name
+        this.precio = productObject.price
+        this.img = productObject.img
+        this.categoria = productObject.category
+        this.cantidadAcumulada = 0
+        this.precioAcumulado = 0
+    }
+
+    agregarProductoAlHTML() {
+
+        if (activeCategory !== this.categoria.toUpperCase()) {
+
+            return
+        }
+
+        let divContainer = document.createElement('div')
+            divContainer.classList.add('producto')
+            divContainer.classList.add('button')
+            divContainer.id = this.nombre
+
+        let img = document.createElement('img')
+            img.src = this.img
+            img.alt = this.nombre
+
+        let divText = document.createElement('div')
+            divText.classList.add('text')
+        
+        let name = document.createElement('span')
+            name.classList.add('name')
+            name.innerText = this.nombre.toUpperCase()
+        
+        let price = document.createElement('span')
+            price.classList.add('price')
+            price.innerText = this.precio + ' USD'
+
+        divText.appendChild(name)
+        divText.appendChild(price)
+
+        divContainer.appendChild(img)
+        divContainer.appendChild(divText)
+
+        const productosDiv = document.getElementsByClassName('productos')[0]
+        productosDiv.appendChild(divContainer)
+    }
+}
+
+const definirProductos = () => {
+
+    let productosDiv = document.getElementsByClassName('productos')[0]
+        productosDiv.innerHTML = ''
+
+    for (const object in productsAPI) {
+        
+        const instanciaProducto = new product(productsAPI[object])
+        
+        instanciaProducto.agregarProductoAlHTML()
+        globalProductos.push(instanciaProducto)
+    }
+
+    const productos = [...productosDiv.children]
+
+    productos.forEach(producto => {
+
+        producto.addEventListener('click', () => {
+
+            enviarProductoAlCheckout(producto.id)
+        })
+
+    })
+}
+
+definirProductos()
+
+//! Navbar logica
+
+const childrenNavbar = document.querySelectorAll('.exposicion-de-productos nav ul li.button')
+
+childrenNavbar.forEach(children => {
+
+    children.addEventListener('click', () => {
+
+        activeCategory = children.innerText
+        makeThisCategoryActive()
+        definirProductos()
+    })
+})
+
+const makeThisCategoryActive = () => {
+    
+    childrenNavbar.forEach(children => {
+
+        if (!children.children[0]) {
+
+            if (activeCategory === children.innerText) {
+                
+                children.classList.add('active')
+            }
+            
+            else if (children.classList.contains('active')) {
+                
+                children.classList.remove('active')
+            }
+        }
+    })
+}
+
+makeThisCategoryActive()
+
+//! Checkout logica
+
+const enviarProductoAlCheckout = (nombreProducto) => {
+
+    if (checkout.hasOwnProperty(nombreProducto)) {
+
+        checkout[`${nombreProducto}`].quantity++
+
+        const element = document.getElementById('row-' + nombreProducto)
+        element.children[0].children[0].innerText = (parseInt(element.children[0].children[0].innerText) + 1)
+
+        checkout[`${nombreProducto}`].precioAcumulado = checkout[`${nombreProducto}`].precioAcumulado + checkout[`${nombreProducto}`].precio
+
+        element.children[3].innerText = checkout[`${nombreProducto}`].precioAcumulado
+
+        registrarCambiosEnElTotal()
+        checkearCantidadDeElementos()
+
+        return
+    }
+    
+    for (const producto in globalProductos) {
+
+        const objeto = globalProductos[producto];
+        
+        if (objeto.nombre  === nombreProducto) {
+            
+            checkout[`${nombreProducto}`] = {
+
+                precio: objeto.precio,
+                precioAcumulado: objeto.precio,
+                quantity: 1
+            }
+
+            let row = document.createElement('tr')
+                row.id = 'row-' + nombreProducto
+
+            let td1 = document.createElement('td')
+            let quantity = document.createElement('span')
+                quantity.innerText = '1'
+
+            let plusOne = document.createElement('button')
+                plusOne.innerText = '+'
+                plusOne.classList.add('button')
+            
+            let minusOne = document.createElement('button')
+                minusOne.innerText = '-'
+                minusOne.classList.add('button')
+
+            td1.appendChild(quantity)
+            td1.appendChild(plusOne)
+            td1.appendChild(minusOne)
+            
+            let td2 = document.createElement('td')
+                td2.innerText = objeto.nombre
+            
+            let td3 = document.createElement('td')
+                td3.innerText = objeto.precio
+
+            let td4 = document.createElement('td')
+                td4.innerText = checkout[`${nombreProducto}`].precioAcumulado
+
+            let td5 = document.createElement('td')
+            let img = document.createElement('img')
+                    img.src = './img/eliminar.png'
+                    img.alt = 'trash-icon'
+                    img.classList.add('button')
+                td5.appendChild(img)
+
+            row.appendChild(td1)
+            row.appendChild(td2)
+            row.appendChild(td3)
+            row.appendChild(td4)
+            row.appendChild(td5)
+
+            const tableCheckout = document.querySelector('.checkout .table-container table tbody')
+                tableCheckout.appendChild(row)
+
+            const recentlyDocumentAdded = document.getElementById('row-' + nombreProducto)
+            const buttons = recentlyDocumentAdded.children[0]
+
+            const plusButton = buttons.children[1]
+            
+            plusButton.addEventListener('click', () => {
+
+                
+                checkout[`${nombreProducto}`].quantity++
+                
+                const element = document.getElementById('row-' + nombreProducto)
+                element.children[0].children[0].innerText = (parseInt(element.children[0].children[0].innerText) + 1)
+                
+                checkout[`${nombreProducto}`].precioAcumulado = checkout[`${nombreProducto}`].precioAcumulado + checkout[`${nombreProducto}`].precio
+                
+                element.children[3].innerText = checkout[`${nombreProducto}`].precioAcumulado
+
+                registrarCambiosEnElTotal()
+                checkearCantidadDeElementos()
+
+                return
+            })
+
+            const minusButton = buttons.children[2]
+
+            minusButton.addEventListener('click', () => {
+
+                
+                if (checkout[`${nombreProducto}`].quantity === 1) {
+
+                    return
+                }
+
+                checkout[`${nombreProducto}`].quantity--
+                
+                const element = document.getElementById('row-' + nombreProducto)
+                element.children[0].children[0].innerText = (parseInt(element.children[0].children[0].innerText) - 1)
+                
+                checkout[`${nombreProducto}`].precioAcumulado = checkout[`${nombreProducto}`].precioAcumulado - checkout[`${nombreProducto}`].precio
+
+                element.children[3].innerText = checkout[`${nombreProducto}`].precioAcumulado
+                
+                registrarCambiosEnElTotal()
+                checkearCantidadDeElementos()
+
+                return
+            })
+
+            const deleteButton = recentlyDocumentAdded.children[4]
+
+            deleteButton.addEventListener('click', () => {
+
+                const element = document.getElementById('row-' + nombreProducto)
+                element.remove()
+
+                delete checkout[`${nombreProducto}`]
+                console.log(checkout)
+            })
+            console.log(recentlyDocumentAdded)
+        }
+    }
+
+    registrarCambiosEnElTotal()
+    checkearCantidadDeElementos()
+}
+
+//! Total Logica
+
+
+const registrarCambiosEnElTotal = () => {
+    
+    const total = document.getElementById('precio')
+    let totalSumado = 0
+
+    console.log(checkout)   
+
+    for (const i in checkout) {
+
+        const product = checkout[i];
+            
+        totalSumado = totalSumado + product.precioAcumulado
+    }
+
+    total.innerText = totalSumado
+}
+
+//! styles Logica
+
+const checkearCantidadDeElementos = () => {
+    
+    if (document.querySelector('#products-display-checkout tbody').children.length > 5) {
+
+
+        const checkout = document.getElementsByClassName('checkout')[0]
+        const table = document.getElementById('products-display-checkout')
+        const tableContainer = table.parentElement
+
+        checkout.style.height = 'auto'
+        table.style.height = 'auto'
+        tableContainer.style.height = 'auto'
+    }
+}
+
+//! Pagar Logica
+
+const pagarButton = document.getElementsByClassName('pagar button')[0]
+
+pagarButton.addEventListener('click', () => {
+
+    let container = document.createElement('div')
+        container.id = 'mensaje-compra-container'
+    
+    let mensajeCompra = document.createElement('div')
+        mensajeCompra.id = 'mensaje-compra'
+
+    let mensaje = document.createElement('h2')
+        mensaje.innerText = 'Espere, sera enviado a la pasarela de pagos en breve...'
+
+    mensajeCompra.appendChild(mensaje)
+    container.appendChild(mensajeCompra)
+
+    const body = document.querySelector('body')
+
+    body.appendChild(container)
+
+    setTimeout(() => {
+
+        //window.location.reload(true)
+
+    }, 3000)
+})

scripts/traerProductosDeAPI.js

@@ -0,0 +1,56 @@
+const traerProductosDeAPI = async () => {
+
+    return await {
+
+        product1: {
+            name: 'Coca-Cola',
+            price: 3.5,
+            img: './img/cocacola-lata.jpg',
+            category: 'bebidas'
+        },
+
+        product2: {
+            name: 'Coca-Cola Zero',
+            price: 3.5,
+            img: './img/cocacola-zero.jpg',
+            category: 'bebidas'
+        },
+
+        product3: {
+            name: 'Manzana Post.',
+            price: 3.5,
+            img: './img/postobon-manzana-lata.jpg',
+            category: 'bebidas'
+        },
+
+        product4: {
+            name: 'Agua Natural',
+            price: 3.5,
+            img: './img/agua-500ml.jpg', 
+            category: 'bebidas'
+        },
+
+        product5: {
+            name: 'Naranja Post.',
+            price: 3.5,
+            img: './img/naranja-postobon.jpg',
+            category: 'bebidas'
+        },
+
+        product6: {
+            name: 'Tropical 2L',
+            price: 3.5, 
+            img: './img/tropical-ecuador-botella.jpg',
+            category: 'bebidas'
+        },
+
+        product7: {
+            name: 'Piña Postobon',
+            price: 3.5,
+            img: './img/postobon-pina.jpg',
+            category: 'bebidas'
+        }
+    }
+}
+
+export default traerProductosDeAPI

style.css

@@ -6,6 +6,13 @@ body {
     font-family: Roboto, helveltica;
 
     display: flex;
+
+    background-color: rgb(214, 214, 214);
+}
+
+img {
+
+    user-select: none;
 }
 
 .button {
@@ -16,7 +23,7 @@ body {
 .menu-lateral {
 
     width: 5vw;
-    height: 100vh;
+    height: auto;
 
     box-sizing: border-box;
 
@@ -46,6 +53,8 @@ header {
 
     background-color: rgb(67, 165, 172);
     color: #fff;
+
+    padding: 0.5vh 0px;
 }
 
 header .logo {
@@ -108,7 +117,7 @@ header .perfil img.profile-img {
 
 header .perfil img.profile-menu {
 
-    height: 3vw;
+    height: 2vw;
     filter: invert(1);
 
 }
@@ -140,7 +149,7 @@ header .perfil img.profile-menu {
 
     border-radius: 5px;
 
-    height: 62.5vh;
+    height: 62vh;
 }
 
 
@@ -162,6 +171,11 @@ header .perfil img.profile-menu {
     border-bottom: 1px solid rgb(206, 206, 206);
 } */
 
+.pagina-principal .primer-columna .checkout .table-container table thead tr #blank-space{
+    
+    width: 2vw;
+}
+
 .pagina-principal .primer-columna .checkout .table-container table tbody {
 
     margin-top: 3vh;
@@ -172,6 +186,14 @@ header .perfil img.profile-menu {
     text-align: center;
 }
 
+.pagina-principal .primer-columna .checkout .table-container table tbody tr td:first-child {
+
+    display: flex;
+
+    align-items: center;
+    justify-content: space-around;
+}
+
 .pagina-principal .primer-columna .checkout .table-container table tbody tr td:first-child button{
 
     background-color: #fff;
@@ -181,6 +203,7 @@ header .perfil img.profile-menu {
 
     border: 1px solid rgb(192, 192, 192);
     border-radius: 100%;
+
 }
 
 .pagina-principal .primer-columna .checkout .table-container table tbody tr td img {
@@ -289,6 +312,12 @@ header .perfil img.profile-menu {
 
 }
 
+.pagina-principal .segunda-columna nav ul li.active {
+
+    border-bottom:1px solid rgb(255, 212, 70);
+}
+
+
 .pagina-principal .segunda-columna nav ul li img{
 
     width: 3vw;
@@ -301,7 +330,7 @@ header .perfil img.profile-menu {
     background-color: #fff;
     border-radius: 5px;
 
-    height: 64.5vh;
+    height: 64vh;
 }
 
 .pagina-principal .segunda-columna .productos {
@@ -403,4 +432,42 @@ header .perfil img.profile-menu {
     color:rgb(255, 212, 70);
 
     user-select: none;
+}
+
+
+#mensaje-compra-container {
+
+    position: absolute;
+
+    height: 100vh;
+    width: 100vw;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: rgba(0, 0, 0, 0.377);
+}
+
+#mensaje-compra {
+    
+    background-color: rgb(73, 73, 73);
+    height: 10vw;
+
+    padding: 0px 5vw;
+    color: #fff;
+
+    display: flex;
+    align-items: center;
+
+    border-radius: 10px;
+
+    user-select: none;
+
+}
+
+#mensaje-compra h2 {
+
+    display: flex;
+    justify-content: center;
 }