From b7e95b8d961f0a5006a13355e0996f94a668feb4 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Thu, 18 Nov 2021 14:40:40 -0300 Subject: [PATCH] modularizated scripts --- index.html | 3 - scripts/checkoutLogica.js | 147 ++++++++++++++++ scripts/navbarLogica.js | 39 +++++ scripts/pagarLogica.js | 45 +++++ scripts/productosLogica.js | 88 ++++++++++ scripts/script.js | 346 ++----------------------------------- scripts/stylesLogica.js | 24 +++ scripts/totalLogica.js | 18 ++ style.css | 2 + 9 files changed, 377 insertions(+), 335 deletions(-) create mode 100644 scripts/checkoutLogica.js create mode 100644 scripts/navbarLogica.js create mode 100644 scripts/pagarLogica.js create mode 100644 scripts/productosLogica.js create mode 100644 scripts/stylesLogica.js create mode 100644 scripts/totalLogica.js diff --git a/index.html b/index.html index 0325a57..8e5ad6f 100644 --- a/index.html +++ b/index.html @@ -142,9 +142,6 @@
  • REFRIGERADOS
    • -
  • - more options button -
    • 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 {