Reto #9 Los hombres de Paco

Los hombres de Paco hacen DNIs

by didacticode

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Los hombres de Paco hacen DNIs</title>
        <link rel="stylesheet" type="text/css" href="Reto09_LosHombresDePaco.css">
        <script src="Reto09_LosHombresDePaco.js"></script>
	</head>    
        <body>
            <div id="cuadro">
                <label for="digitos">NIE/NIF</label>
                <input type="text" pattern="^([XYZ][0-9]{7})|([0-9]{8})$" maxlength="8" id="digitos" name="digitos"/>
                <input type="text" size="1" readonly="readonly" id="letra" name="letra"/>
            </div>
        </body>
</html>

CSS

body {
    font-family: Arial;
    color: black;
    background-image: url(ordenadorportatil.png);
    background-size: cover;
}
div#cuadro {
    background-color:white;
    width: 500px;
    text-align: center;  
    margin: 150px auto;
    padding: 20px;
}

JavaScript

const LETRASNIE = "XYZ"; 
const CADENALETRAS="TRWAGMYFPDXBNJZSQVHLCKET";

window.addEventListener("load", inicio, true);

function inicio(){
    //Asociamos el evento al input de los dígitos cada vez que levantamos el dedo de una tecla
    document.getElementById("digitos").addEventListener("keyup", calcularLetra, true);
}

function calcularLetra(evento){
    let digitos = evento.target.value;
    console.log("El valor que contiene el input es "+digitos);

    if(digitos.length===8){
        console.log("Hemos alcanzado los 8 caracteres en el campo input");
        if (evento.target.checkValidity()){
            console.log("La expresión regular es correcta");
            if(LETRASNIE.includes(digitos.substring(0,1))){ //Es un NIE
                console.log("Es un NIE");
                digitos = digitos.replace(digitos.substring(0,1),LETRASNIE.indexOf(digitos.substring(0,1)));
                console.log("El digito se transforma a "+digitos);
            } else console.log("Es un NIF");
            let posicionEnCadenaLetras = digitos % 23;
            let letra = CADENALETRAS.substr(posicionEnCadenaLetras, 1);
            console.log(letra);
            document.getElementById("letra").value = letra;
        } else {
            alert ("El valor introducido no es correcto: debe ser 8 dígitos o 1 letra (X,Y o Z) y 7 dígitos");
        }
    }//Si no limitamos el tamaño del input tendríamos que poner aquí un mensaje de error
    //al pasarnos de más de 8 caracteres
}