Repository navigation
Comercio Electronico Basico Parte 01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="card-products-container">
<div class="card-products" id="shopContent"></div>
</div>
<!--cart-btn-->
<div class="cart-btn" id="cart-btn">🛒</div>
<!--modal-->
<div class="modal-overlay" id="modal-overlay"></div>
<div class="modal-container" id="modal-container"></div>
<script src="/client/js/products.js"></script>
<script src="/client/js/index.js"></script>
<script src="/client/js/cart.js"></script>
</body>
</html>
Este código es una estructura básica de una página web HTML. Aquí tienes una explicación de cada parte del código:
: Esta línea declara la versión del documento HTML que se está utilizando, que en este caso es HTML5. : Aquí comienza el documento HTML. es el elemento raíz de un documento HTML y lang="en" especifica que el idioma de la página es inglés (en inglés). : Dentro de esta sección se incluyen metadatos y referencias a recursos externos que se utilizan en la página, como hojas de estilo y scripts. A continuación, se explican las etiquetas dentro de :: Esta línea especifica la codificación de caracteres utilizada en la página, que es UTF-8, una codificación de caracteres que admite una amplia variedad de caracteres de diferentes idiomas.
: Esta línea se utiliza para definir el modo de compatibilidad con Internet Explorer. En este caso, se establece en "edge", lo que significa que se usará la última versión de IE disponible.
: Esta línea se utiliza para configurar la vista en dispositivos móviles. Establece el ancho de la ventana gráfica igual al ancho del dispositivo y escala inicialmente la página a un factor de 1.0.
: Esta línea enlaza una hoja de estilo externa llamada "style.css" que se utilizará para aplicar estilos a la página. <title>Document</title>: Esto establece el título de la página, que en este caso es "Document". El título aparecerá en la pestaña del navegador. : Esta sección contiene el contenido visible de la página web. Aquí se encuentran los elementos que se mostrarán en la ventana del navegador. A continuación, se explican los elementos dentro de :Comentarios HTML (): Estos son comentarios que no se mostrarán en la página, pero pueden servir para agregar notas o aclaraciones en el código fuente.
: Un contenedor div con la clase "modal-overlay" y el ID "modal-overlay". Esto podría utilizarse como un fondo oscurecido para un modal (ventana emergente) que se muestra en la página. : Otro contenedor div con la clase "modal-container" y el ID "modal-container". Esto podría ser el contenido de un modal que se muestra encima de la página principal.Tres líneas que enlazan archivos JavaScript externos utilizando la etiqueta <script>. Estos archivos de JavaScript se encuentran en la ruta "/client/js/" y son "products.js", "index.js" y "cart.js". Estos scripts probablemente se utilizan para agregar funcionalidad interactiva a la página web.
En resumen, este código HTML establece la estructura básica de una página web y enlaza archivos de estilo y scripts de JavaScript para darle funcionalidad. La página parece estar relacionada con la visualización de productos y la interacción con un carrito de compras.
const productos = [
{
id:1,
productName: "Banana",
price: 480,
quanty: 1,
img: "/client/media/banana.jfif",
},
{
id:2,
productName: "Leche",
price: 950,
quanty: 1,
img: "/client/media/leche.jfif",
},
{
id:3,
productName: "Pollo",
price: 750,
quanty: 1,
img: "/client/media/pollo.jfif",
},
{
id:4,
productName: "Mayonesa",
price: 510,
quanty: 1,
img: "/client/media/mayonesa.jfif",
},
];
Este código es una declaración de una constante llamada "productos" que almacena un array de objetos JavaScript. Cada objeto en el array representa un producto y contiene información sobre ese producto. Aquí está la explicación de cada propiedad en los objetos del array:
id: Un identificador único para cada producto. Cada producto tiene un número de identificación único, que permite diferenciarlo de los demás productos en la lista.
productName: El nombre del producto. Esta propiedad almacena el nombre del producto, que en este caso incluye nombres como "Banana", "Leche", "Pollo" y "Mayonesa".
price: El precio del producto. Esta propiedad almacena el precio del producto en alguna unidad monetaria (por ejemplo, en centavos o en la moneda local). Cada producto tiene un precio asociado.
quanty: La cantidad del producto. Esta propiedad almacena la cantidad de ese producto que se desea comprar. En este caso, todos los productos tienen una cantidad inicial de 1, pero esta cantidad podría modificarse según las necesidades del usuario.
img: La ruta de la imagen del producto. Esta propiedad almacena la ruta de la imagen que se utilizará para mostrar el producto en la interfaz de usuario. Las rutas son relativas al directorio "/client/media/" y se proporciona una imagen para cada producto.
En resumen, el array "productos" contiene información sobre varios productos, incluyendo su nombre, precio, cantidad y una ruta a una imagen. Este tipo de estructura de datos es comúnmente utilizada en aplicaciones de comercio electrónico o carritos de compras en línea para mantener un registro de los productos que un usuario ha seleccionado para comprar. Cada objeto en el array representa un artículo en la lista de productos disponibles para el usuario.
URL: https://github.com/CodeSystem2022/ChacoDevsTeam-4SEM/tree/master/JAVASCRIPT/e-commerce2022/client/js