Reto #2 Stranger things (1)
Validar una contraseña con Javascript
by didacticode
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Dustin, Suzie y la constante de Planck - Validar una contraseña con Javascript</title>
<meta charset="utf-8"/>
<style>
body{
background-image: url(cajafuerte.jpg);
height:100vh;
padding: 0;
color: white;
font-family: sans-serif;
}
div.centrado {
height: 100%;
display: flex;
align-items: center; /* Vertical */
margin-left: 20rem;
}
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
background-color: crimson;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
<script src="Reto02_StrangerThings1.js"></script>
</head>
<body>
<div class="centrado">
<form action="salvarmundo.html" method="post">
Introduzca la contraseña para evitar la destrucción del mundo <br/><br/>
<input type="password" id="password" name="password" placeholder="Introduzca la contraseña" title="" required/><br/>
<input type="submit" value="Comprobar" id="enviar"/>
</form>
</div>
</body>
JavaScript
window.addEventListener("load", inicio, false);
// Función que se ejecuta después de cargar el HTML (load)
function inicio(){
document.getElementById("enviar").addEventListener("click",comprobar,false);
}
// Función que comprueba si el valor que contiene el campo password es correcto
function comprobar(evento){
let pass = document.getElementById("password").value;
if (passwordCorrecta(pass)){
alert("Acceso correcto");
} else {
alert("Acceso erróneo");
evento.preventDefault();
}
}
// Función que comprueba si la contraseña es la constante de Planck -versión actual y
// versión de los años 80; además, consideramos que puede introducirse coma o punto.
// Se podría utilizar la función .replace para cambiar las comas por puntos o viceversa
function passwordCorrecta (password){
const constantes = ['6.62607015', '6.62607004', '6,62607015', '6,62607004'];
return constantes.includes(password);
}