forked from marquez.juan/clase-10-ejercicios-de-repaso
Compare commits
2 Commits
f86b6dc056
...
35ebe21767
| Author | SHA1 | Date | |
|---|---|---|---|
|
35ebe21767 | ||
|
|
1f6bb5fa62 |
@@ -1 +1,50 @@
|
|||||||
// Agregar aquí el código javascript
|
// Agregar aquí el código javascript
|
||||||
|
|
||||||
|
// ## Ejercicio 7: Formulario con validación
|
||||||
|
|
||||||
|
// Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo,
|
||||||
|
// validar:
|
||||||
|
|
||||||
|
// - Que ningún campo esté vacío.
|
||||||
|
// - Que la edad contenga números enteros entre 0 y 100.
|
||||||
|
// - Que la contraseña tenga al menos 8 caracteres.
|
||||||
|
|
||||||
|
// Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido,
|
||||||
|
// ocultar los errores y mostrar un mensaje de éxito.
|
||||||
|
|
||||||
|
//creamos las variables
|
||||||
|
let formulario = document.querySelector('form');
|
||||||
|
let inputNombre = document.querySelector('#input-nombre');
|
||||||
|
let inputEdad = document.querySelector('#input-edad');
|
||||||
|
let inputPassword = document.querySelector('#input-password');
|
||||||
|
let mensajeErrorNombre = document.querySelector('#nombre-error');
|
||||||
|
let mensajeErrorEdad = document.querySelector('#edad-error');
|
||||||
|
let mensajeErrorPassword = document.querySelector('#password-error');
|
||||||
|
|
||||||
|
//creamos el listener que se activara al enviar el form
|
||||||
|
formulario.addEventListener('submit' ,(e)=>{
|
||||||
|
e.preventDefault();
|
||||||
|
// una vez activado el listener empezamos a validar los valores recibidos
|
||||||
|
if(inputNombre.value === ''){ //si el nombre esta vacio, llenamos el mensaje de error
|
||||||
|
mensajeErrorNombre.textContent = 'Ingresa tu nombre'
|
||||||
|
} else {mensajeErrorNombre.textContent = ''} // Si el nombre NO esta vacio, borramos el mensaje de error
|
||||||
|
if(inputEdad.value === ''){
|
||||||
|
mensajeErrorEdad.textContent = 'Ingresa tu edad'
|
||||||
|
} else if(inputEdad.value < 0 || inputEdad.value > 100 ){ // si es menor a 0 o mayor a 100 llenamos el mensaje de error
|
||||||
|
mensajeErrorEdad.textContent = 'Edad fuera de limites'
|
||||||
|
} else {mensajeErrorEdad.textContent = ''} // si nunguno de los errores surge, vaciamos el mensaje de error
|
||||||
|
if(inputPassword.value === ''){
|
||||||
|
mensajeErrorPassword.textContent = 'Ingrese la password'
|
||||||
|
} else if (inputPassword.value.length < 8){ // si tiene menos de 8 caracteres llenamos el mensaje de error
|
||||||
|
mensajeErrorPassword.textContent = 'Password corta'
|
||||||
|
}
|
||||||
|
else {mensajeErrorPassword.textContent = ''}
|
||||||
|
|
||||||
|
// Si los 3 mensajes de error estan vacios, damos el formulario por valido (importante que esta condicion este en el final del listener)
|
||||||
|
if (mensajeErrorNombre.textContent == '' && mensajeErrorEdad.textContent == '' && mensajeErrorPassword.textContent == ''){
|
||||||
|
alert('Formulario enviado con exito'); // informamos el envio del formulario
|
||||||
|
inputNombre.value = ''; // y vaciamos los inputs
|
||||||
|
inputEdad.value = '';
|
||||||
|
inputPassword.value = '';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|||||||
@@ -8,7 +8,21 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Ejercicio 7</h1>
|
<h1>Ejercicio 7</h1>
|
||||||
|
<form action="">
|
||||||
|
<label for="input-nombre">Nombre</label>
|
||||||
|
<input type="text" name="input-nombre" id="input-nombre">
|
||||||
|
<label for="input-nombre" id="nombre-error" style="color: rgba(238, 21, 21, 0.971);"></label>
|
||||||
|
<br>
|
||||||
|
<label for="input-edad">Edad</label>
|
||||||
|
<input type="number" name="input-edad" id="input-edad">
|
||||||
|
<label for="input-edad" id="edad-error" style="color: rgba(238, 21, 21, 0.971);"></label>
|
||||||
|
<br>
|
||||||
|
<label for="input-password">Password</label>
|
||||||
|
<input type="password" name="input-password" id="input-password">
|
||||||
|
<label for="input-password" id="password-error" style="color: rgba(238, 21, 21, 0.971);"></label>
|
||||||
|
<br>
|
||||||
|
<input type="submit" value="Enviar">
|
||||||
|
</form>
|
||||||
<script src="ejercicio7.js"></script>
|
<script src="ejercicio7.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1 +1,36 @@
|
|||||||
// Agregar aquí el código javascript
|
// Agregar aquí el código javascript
|
||||||
|
|
||||||
|
// Construir dinámicamente una lista de productos en la página, donde cada ítem
|
||||||
|
// tenga un botón "Agregar al carrito". Al hacer clic, el producto se agrega a
|
||||||
|
// una sección "Carrito" visible en la página, junto con su precio. Al pie del
|
||||||
|
// carrito, mostrar el total actualizado.
|
||||||
|
|
||||||
|
// Si el mismo producto se agrega más de una vez, no duplicarlo: incrementar su
|
||||||
|
// cantidad y actualizar el total.
|
||||||
|
|
||||||
|
|
||||||
|
// Lista de prodcutos
|
||||||
|
let ArrayProductos = ['arroz', 'aceite', 'fideos', 'azucar', 'avena'];
|
||||||
|
|
||||||
|
// asignamos las variables NO dinamicas y anexamos al body
|
||||||
|
let body = document.querySelector('body');
|
||||||
|
let listaProductos = document.createElement('ul');
|
||||||
|
body.appendChild(listaProductos);
|
||||||
|
|
||||||
|
// Creamos la lista dinamica recorriendo el array con los productos
|
||||||
|
for (producto of ArrayProductos){
|
||||||
|
let liProducto = document.createElement('li');
|
||||||
|
liProducto.innerHTML = `<li> ${producto} <button type="button" id='boton-carrito'>+</button></li>`;
|
||||||
|
listaProductos.appendChild(liProducto);
|
||||||
|
}
|
||||||
|
// creamos un listener en la 'ul' que solo muestra console.log si se toca el boton (esta logica nos servira mas adelante)
|
||||||
|
listaProductos.addEventListener('click', (e) => {
|
||||||
|
if (e.target.id === 'boton-carrito'){
|
||||||
|
console.log('el boton + fue clickeado')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// obervaciones para el siguiente commit: no fue la mejor decicion hacer un array en simple
|
||||||
|
// en arrayProductos, ya que cada producto debe tener un precio asociado.
|
||||||
|
// se debe modificar arrayProductos y hacerla
|
||||||
|
// un array de objetos con las propiedades 'nombre' y 'precio'
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Ejercicio 8</h1>
|
<h1>Ejercicio 8</h1>
|
||||||
|
<button></button>
|
||||||
<script src="ejercicio8.js"></script>
|
<script src="ejercicio8.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user