diff --git a/index.html b/index.html
index 0325a57..8e5ad6f 100644
--- a/index.html
+++ b/index.html
@@ -142,9 +142,6 @@
REFRIGERADOS
-
- 
-
diff --git a/scripts/checkoutLogica.js b/scripts/checkoutLogica.js
new file mode 100644
index 0000000..5faf20f
--- /dev/null
+++ b/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
diff --git a/scripts/navbarLogica.js b/scripts/navbarLogica.js
new file mode 100644
index 0000000..ec26786
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/scripts/pagarLogica.js b/scripts/pagarLogica.js
new file mode 100644
index 0000000..b1bfcc7
--- /dev/null
+++ b/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
diff --git a/scripts/productosLogica.js b/scripts/productosLogica.js
new file mode 100644
index 0000000..946b468
--- /dev/null
+++ b/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)
+ })
+
+ })
+}
\ No newline at end of file
diff --git a/scripts/script.js b/scripts/script.js
index fb08184..737cc03 100644
--- a/scripts/script.js
+++ b/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 () => {
-
- return await traerProductosDeAPI()
-}
+//? styles Logica
-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()
+import stylesLogica from './stylesLogica.js' //? checkearCantidadDeElementos
//! 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)
- element.children[0].children[0].innerText = (parseInt(element.children[0].children[0].innerText) + 1)
+//! Navbar logica
- 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()
- 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)
-
- 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)
-})
\ No newline at end of file
+import pagarLogica from './pagarLogica.js'
+pagarLogica(checkout)
\ No newline at end of file
diff --git a/scripts/stylesLogica.js b/scripts/stylesLogica.js
new file mode 100644
index 0000000..3f80f9e
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/scripts/totalLogica.js b/scripts/totalLogica.js
new file mode 100644
index 0000000..8516d0d
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/style.css b/style.css
index 14c66e4..94b4da2 100644
--- a/style.css
+++ b/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 {