Stranger Things
ProgramaciónValidar una contraseña con Javascript
La semana pasada recibíamos el reto para ponérselo difícil a los personajes de Stranger Things, cuyo título era “Dustin, Suzie y la constante de Planck“.
Enunciado del reto
El reto decía así:
Señorita Ada:
Necesitamos que cree un formulario que compruebe si se ha introducido correctamente la constante de Planck.
* Que, por cierto, es 6.62607015, aunque Suzie menciona una versión anterior 6,62607004.
En esta ocasión, y basándonos en el reto de la semana anterior (Berlín, Tokio y Moscú también son capitales), he diseñado dos soluciones:
- Una sencilla, que comprueba simplemente que la contraseña cumple con alguno de los dos valores de la constante de Planck.
- Una un poco más compleja y que se lo pone chupao a los que tienen que introducirla: además de comprobar los valores validamos el formulario HTML.
Pero recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!
¿Qué aprenderás en los vídeos?
Así que en estos dos vídeos os explico:
- Cómo asignar un evento a un objeto (en este caso, al botón enviar) para que se ejecute una función cuando hacemos click sobre él.
- Cómo llamar a a función con nombre y a una función anónima asociadas a un evento.
- Cómo evitar el envío de un formulario.
- Cómo comprobar que un valor se corresponde con uno de entre cuatro.
- Cómo crear un patrón para un decimal como la constante de Planck.
- Cómo realizar una validación de campo no vacío y patrón.
- Cómo utilizar el selector :valid e :invalid de CSS para asignar un estilo a un campo que cumple con las restricciones… o no.
- Cómo usar validity y no morir en el intento.
- Cómo modularizar el código con tres funciones.
Vídeos y código fuente
¡Basta de rollos! ¡Echa un ojo a los vídeos!
Código fuente de la solución (1/2)
[/not_logged_in]
Código fuente de la solución (2/2)
[/not_logged_in]
¿Tú cómo lo habrías hecho? ¡Deja tus ideas en los comentarios!
Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…
Sinceramente, me ha encantado!!!. Además de explicarlo de forma magistral en los vídeos, aportas el código de la solución.
Gracias por los ejercicios, le ha encantado a mis alumnos de DWEC que también te mandan felicitaciones.
Saludoossss!
¡Me alegro muchísimo, Agustín! La verdad es que no hay nada mejor que la aprobación de compañeros y alumnado. ¿En qué instituto trabajas? Ya me contarás! ¡Un saludo!