modularizated scripts

index.html

@@ -142,9 +142,6 @@
                         <li class="button">
                             REFRIGERADOS
                         </li>
-                        <li class="button">
-                            <img src="./img/more-options-min.png" alt="more options button"> <!--Source: https://www.flaticon.com/premium-icon/more_5857049?term=more%20apps&page=1&position=46&page=1&position=46&related_id=5857049&origin=search-->
-                        </li>
                     </ul>
                 </nav>
                 

scripts/checkoutLogica.js

@@ -0,0 +1,147 @@
+const enviarProductoAlCheckout = (nombreProducto, checkout, globalProductos, registrarCambiosEnElTotal, checkearCantidadDeElementos) => {
+
+    console.log(checkout)
+
+    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(checkout)
+        checkearCantidadDeElementos(checkout)
+
+        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(checkout)                
+                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(checkout)                
+                checkearCantidadDeElementos()
+
+                return
+            })
+
+            const deleteButton = recentlyDocumentAdded.children[4]
+
+            deleteButton.addEventListener('click', () => {
+
+                const element = document.getElementById('row-' + nombreProducto)
+                element.remove()
+
+                delete checkout[`${nombreProducto}`]
+                console.log(checkout)
+
+                registrarCambiosEnElTotal(checkout)                
+                checkearCantidadDeElementos()
+            })
+            console.log(recentlyDocumentAdded)
+        }
+    }
+
+    registrarCambiosEnElTotal(checkout)
+    checkearCantidadDeElementos()
+}
+
+export default enviarProductoAlCheckout

scripts/navbarLogica.js

@@ -0,0 +1,39 @@
+const navbarLogica = async (activeCategory, globalProductos, enviarProductoAlCheckout, checkout, totalLogica, stylesLogica, definirProductos) => {
+
+    const childrenNavbar = document.querySelectorAll('.exposicion-de-productos nav ul li.button')
+
+    childrenNavbar.forEach(children => {
+
+        children.addEventListener('click', () => {
+
+            globalProductos = []
+
+            activeCategory = children.innerText
+            makeThisCategoryActive()
+            definirProductos(globalProductos, activeCategory, enviarProductoAlCheckout, checkout, totalLogica, stylesLogica)
+        })
+    })
+
+    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()
+}
+
+export default navbarLogica

scripts/pagarLogica.js

@@ -0,0 +1,45 @@
+const pagarLogica = (checkout) => {
+
+    const pagarButton = document.getElementsByClassName('pagar button')[0]
+    
+    pagarButton.addEventListener('click', () => {
+
+        if (JSON.stringify(checkout) === '{}') {
+    
+            alert('Por favor, agregue uno o mas productos.')
+            return
+        }
+        
+        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, será enviado a la pasarela de pagos en breve...'
+
+        mensajeCompra.appendChild(mensaje)
+        container.appendChild(mensajeCompra)
+
+        const body = document.querySelector('body')
+
+        body.appendChild(container)
+
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: 'smooth'
+        });
+
+        body.style.overflowY = 'hidden'
+
+        setTimeout(() => {
+
+            window.location.reload(true)
+
+        }, 3000)
+    })
+}
+
+export default pagarLogica

scripts/productosLogica.js

@@ -0,0 +1,88 @@
+import traerProductosDeAPI from './traerProductosDeAPI.js'
+
+export const productosLogica = async (activeCategory, globalProductos, enviarProductoAlCheckout, checkout, totalLogica, stylesLogica) => {
+
+    definirProductos(globalProductos, activeCategory, enviarProductoAlCheckout, checkout, totalLogica, stylesLogica)
+}
+
+export const definirProductos = async (globalProductos, activeCategory, enviarProductoAlCheckout, checkout, totalLogica, stylesLogica) => {
+    
+    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)
+        }
+    }
+
+    let productosDiv = document.getElementsByClassName('productos')[0]
+    productosDiv.innerHTML = ''
+
+    for (const object in await 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, checkout, globalProductos, totalLogica, stylesLogica)
+        })
+        
+    })
+}

scripts/script.js

@@ -4,347 +4,29 @@ let activeCategory = 'BEBIDAS'
 let checkout = {}
 let globalProductos = []
 
-//! Productos Logica
+//! Total Logica
 
-import traerProductosDeAPI from './traerProductosDeAPI.js'
+import totalLogica from './totalLogica.js' //? registrarCambiosEnElTotal
 
-const traerData = async ()  => {
+//? styles Logica
 
-    return await traerProductosDeAPI()
+import stylesLogica from './stylesLogica.js' //? checkearCantidadDeElementos
-}
-
-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', () => {
-
-        globalProductos = []
-
-        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) => {
+import checkoutLogica from './checkoutLogica.js' //? enviarProductoAlCheckout
 
-    if (checkout.hasOwnProperty(nombreProducto)) {
+//? Productos Logica
 
-        checkout[`${nombreProducto}`].quantity++
+import {productosLogica, definirProductos} from './productosLogica.js'
+await productosLogica(activeCategory, globalProductos, checkoutLogica, checkout, totalLogica, stylesLogica)
 
-        const element = document.getElementById('row-' + nombreProducto)
+//! Navbar logica
-        element.children[0].children[0].innerText = (parseInt(element.children[0].children[0].innerText) + 1)
 
-        checkout[`${nombreProducto}`].precioAcumulado = checkout[`${nombreProducto}`].precioAcumulado + checkout[`${nombreProducto}`].precio
+import navbarLogica from './navbarLogica.js'
+await navbarLogica(activeCategory, globalProductos, checkoutLogica, checkout, totalLogica, stylesLogica, definirProductos)
 
-        element.children[3].innerText = checkout[`${nombreProducto}`].precioAcumulado
+//? Pagar Logica
 
-        registrarCambiosEnElTotal()
+import pagarLogica from './pagarLogica.js'
-        checkearCantidadDeElementos()
+pagarLogica(checkout)
-
-        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)
-
-                registrarCambiosEnElTotal()
-                checkearCantidadDeElementos()
-            })
-            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 = () => {
-    
-    const checkout = document.getElementsByClassName('checkout')[0]
-    const table = document.getElementById('products-display-checkout')
-    const tableContainer = table.parentElement
-
-    if (document.querySelector('#products-display-checkout tbody').children.length > 5) {
-
-
-        checkout.style.height = 'auto'
-        table.style.height = 'auto'
-        tableContainer.style.height = 'auto'
-    }
-
-    else {
-        
-        checkout.style.height = '62vh'
-        table.style.height = 'auto'
-        tableContainer.style.height = '50vh'
-
-    }
-}
-
-//! 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/stylesLogica.js

@@ -0,0 +1,24 @@
+const checkearCantidadDeElementos = () => {
+    
+    const checkout = document.getElementsByClassName('checkout')[0]
+    const table = document.getElementById('products-display-checkout')
+    const tableContainer = table.parentElement
+
+    if (document.querySelector('#products-display-checkout tbody').children.length > 5) {
+
+
+        checkout.style.height = 'auto'
+        table.style.height = 'auto'
+        tableContainer.style.height = 'auto'
+    }
+
+    else {
+        
+        checkout.style.height = '62vh'
+        table.style.height = 'auto'
+        tableContainer.style.height = '50vh'
+
+    }
+}
+
+export default checkearCantidadDeElementos

scripts/totalLogica.js

@@ -0,0 +1,18 @@
+const registrarCambiosEnElTotal = (checkout) => {
+    
+    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
+}
+
+export default registrarCambiosEnElTotal

style.css

@@ -310,6 +310,8 @@ header .perfil img.profile-menu {
 
     color: rgb(73, 73, 73);
 
+    margin: 1vh 0px;
+
 }
 
 .pagina-principal .segunda-columna nav ul li.active {