diff --git a/ejercicio7/ejercicio7.js b/ejercicio7/ejercicio7.js index 6ce9e92..4bcfa90 100644 --- a/ejercicio7/ejercicio7.js +++ b/ejercicio7/ejercicio7.js @@ -1 +1,61 @@ -// Agregar aquí el código javascript +const formulario = document.getElementById('formulario'); +const nombreInput = document.getElementById('nombre'); +const edadInput = document.getElementById('edad'); +const contrasenaInput = document.getElementById('contrasena'); + +const errorNombre = document.getElementById('error-nombre'); +const errorEdad = document.getElementById('error-edad'); +const errorContrasena = document.getElementById('error-contrasena'); +const mensajeExito = document.getElementById('mensaje-exito'); + +function limpiarErrores() { + errorNombre.textContent = ''; + errorEdad.textContent = ''; + errorContrasena.textContent = ''; + mensajeExito.textContent = ''; +} + +function validarFormulario() { + limpiarErrores(); + + let esValido = true; + const nombre = nombreInput.value.trim(); + const edad = edadInput.value.trim(); + const contrasena = contrasenaInput.value; + + if (nombre === '') { + errorNombre.textContent = 'El nombre no puede quedar vacío.'; + esValido = false; + } + + if (edad === '') { + errorEdad.textContent = 'La edad no puede quedar vacía.'; + esValido = false; + } else { + const edadNumero = Number(edad); + if (!Number.isInteger(edadNumero) || edadNumero < 0 || edadNumero > 100) { + errorEdad.textContent = 'La edad debe ser un número entero entre 0 y 100.'; + esValido = false; + } + } + + if (contrasena === '') { + errorContrasena.textContent = 'La contraseña no puede quedar vacía.'; + esValido = false; + } else if (contrasena.length < 8) { + errorContrasena.textContent = 'La contraseña debe tener al menos 8 caracteres.'; + esValido = false; + } + + return esValido; +} + +formulario.addEventListener('submit', (event) => { + event.preventDefault(); + + if (validarFormulario()) { + mensajeExito.textContent = 'Formulario enviado correctamente.'; + } else { + mensajeExito.textContent = ''; + } +}); diff --git a/ejercicio7/estilo.css b/ejercicio7/estilo.css index 159b7f6..6d64baa 100644 --- a/ejercicio7/estilo.css +++ b/ejercicio7/estilo.css @@ -1,2 +1,42 @@ /* Agregar el código CSS necesario para el ejercicio */ +body { + font-family: Arial, sans-serif; + margin: 20px; +} + +.campo { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 4px; +} + +input { + display: block; + width: 100%; + max-width: 320px; + padding: 8px; + box-sizing: border-box; +} + +button { + padding: 10px 16px; + cursor: pointer; +} + +.error { + display: block; + margin-top: 4px; + color: #c0392b; + font-size: 0.95rem; +} + +.exito { + margin-top: 16px; + color: #2d7a2d; + font-weight: bold; +} + diff --git a/ejercicio7/index.html b/ejercicio7/index.html index 205939a..b1618b4 100644 --- a/ejercicio7/index.html +++ b/ejercicio7/index.html @@ -2,13 +2,37 @@ - + Ejercicio 7

Ejercicio 7

+
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+ +

+ diff --git a/ejercicio8/ejercicio8.js b/ejercicio8/ejercicio8.js index 6ce9e92..83688e6 100644 --- a/ejercicio8/ejercicio8.js +++ b/ejercicio8/ejercicio8.js @@ -1 +1,71 @@ -// Agregar aquí el código javascript +const productos = [ + { nombre: "Teclado", precio: 8500 }, + { nombre: "Mouse", precio: 4200 }, + { nombre: "Monitor", precio: 62000 }, + { nombre: "Auriculares", precio: 11000 }, + { nombre: "Webcam", precio: 15500 } +]; + +const contenedorProductos = document.querySelector("#productos"); +const carritoLista = document.querySelector("#carrito"); +const totalTexto = document.querySelector("#total"); + +const carrito = []; + +function mostrarProductos() { + for (const producto of productos) { + const div = document.createElement("div"); + + div.innerHTML = ` + ${producto.nombre} - $${producto.precio} + + `; + + const boton = div.querySelector("button"); + + boton.addEventListener("click", () => { + agregarAlCarrito(producto); + }); + + contenedorProductos.appendChild(div); + } +} + +function agregarAlCarrito(producto) { + const existente = carrito.find( + item => item.nombre === producto.nombre + ); + + if (existente) { + existente.cantidad++; + } else { + carrito.push({ + nombre: producto.nombre, + precio: producto.precio, + cantidad: 1 + }); + } + + actualizarCarrito(); +} + +function actualizarCarrito() { + carritoLista.innerHTML = ""; + + let total = 0; + + for (const item of carrito) { + const li = document.createElement("li"); + + li.textContent = + `${item.nombre} x${item.cantidad} - $${item.precio * item.cantidad}`; + + carritoLista.appendChild(li); + + total += item.precio * item.cantidad; + } + + totalTexto.textContent = `Total: $${total}`; +} + +mostrarProductos(); diff --git a/ejercicio8/index.html b/ejercicio8/index.html index ec3d268..fedbf47 100644 --- a/ejercicio8/index.html +++ b/ejercicio8/index.html @@ -8,7 +8,15 @@

Ejercicio 8

+

Productos

+
+ +

Carrito

+ + + +

Total: $0