A Pen by osorioemprendimientos on CodePen.
Created
February 5, 2025 04:37
-
-
Save osorioemprendimientos/a6807a17ca721e6be25ba87e5f25faae to your computer and use it in GitHub Desktop.
Boyo crioyo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Fast Food - Compras</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Fast Food</h1> | |
| <nav> | |
| <a href="#">Productos</a> | |
| <a href="#">Carrito</a> | |
| <a href="#">Pagos</a> | |
| <a href="#">Consultas</a> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id="productos"> | |
| </section> | |
| <section id="carrito"> | |
| </section> | |
| <section id="pagos"> | |
| </section> | |
| <section id="consultas"> | |
| <a href="https://wa.me/NUMERO_DE_CONTACTO" target="_blank"> | |
| <button>Consultar por WhatsApp</button> | |
| </a> | |
| </section> | |
| </main> | |
| <footer> | |
| </footer> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Obtener elementos del DOM | |
| const productosSection = document.getElementById('productos'); | |
| const carritoSection = document.getElementById('carrito'); | |
| // Cargar productos desde una base de datos o archivo JSON | |
| fetch('productos.json') | |
| .then(response => response.json()) | |
| .then(productos => { | |
| productos.forEach(producto => { | |
| // Crear elementos HTML para cada producto | |
| const productoDiv = document.createElement('div'); | |
| productoDiv.innerHTML = ` | |
| <h3>${producto.nombre}</h3> | |
| <img src="${producto.imagen}" alt="${producto.nombre}"> | |
| <p>${producto.precio}</p> | |
| <button>Agregar al carrito</button> | |
| `; | |
| // Agregar producto a la sección de productos | |
| productosSection.appendChild(productoDiv); | |
| }); | |
| }); | |
| // Funcionalidad para agregar productos al carrito | |
| // ... | |
| // Funcionalidad para procesar pagos | |
| // ... | |
| // Funcionalidad para imprimir tickets | |
| // ... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Estilos generales */ | |
| body { | |
| font-family: sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| header { | |
| background-color: #f0f0f0; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| /* Estilos para secciones */ | |
| #productos, #carrito, #pagos, #consultas { | |
| padding: 20px; | |
| } | |
| /* Estilos para botón de WhatsApp */ | |
| #consultas button { | |
| background-color: #25d366; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment