Los hombres de Paco
ProgramaciónEventos y cálculos
Quién nos iba a decir que los intrépidos Hombres de Paco iban a acabar en la oficina de expedición de DNIs y pasaportes de la Comisaría de San Antonio.
Fue Paco Miranda quien contactó con nosotros para pedirnos una funcionalidad más que evidente en una delegación como la suya: necesitaba hacer una calculadora de la letra del NIF y del NIE, algo que nos pareció muy útil para cualquier página web que necesitara almacenar este tipo de información. El mensaje decía así:
¡Hola, Ada y Edu!
Soy Paco Miranda, inspector jefe en la Comisaría de San Antonio.
Estamos implementando una funcionalidad en nuestra aplicación de creación de NIFs y NIEs y necesitamos una calculadora de la letra de control. Pero es importante que entendáis la diferencia entre un NIF y un NIE.
– Los NIFs están formados por 8 dígitos y una letra de control.
– Los NIEs están formados por una letra (X, Y o Z), 7 dígitos y una letra de control. Estas letras iniciales equivalen a 0, 1 o 2 respectivamente de cara a hacer los cálculos.
Te facilito un enlace donde se explica cómo calcular ese dígito de control.
Necesitamos un formulario con dos campos: en el primero se introduce los dígitos del NIF o NIE y en el segundo debería aparecer automáticamente la letra correspondiente. ¿Nos echáis una mano?
Edu puso la puntilla sobre el mensaje de Paco, como siempre:
Necesitarás una expresión regular para validar los datos del input, ¿verdad? ¿Qué evento utilizarás para comprobar que el campo de los dígitos está completo? ¿Vas a utilizar un array o una cadena para almacenar las letras? Mmmmmm… ¿crees que Sara Miranda seguirá con Lucas?
La verdad es que me hizo pensar: tendría que darle una vuelta al tema de los eventos asociados al input, ¿al levantar una tecla? ¿al perder el foco? ¿al hacer click? ¿Tú que opinas? ¡Espero tus propuestas en los comentarios!
¡Comparte en redes sociales! ¡No te lo quedes para tí sol@!
Este reto es bien fácil
Jejejeje… sí, ¿verdad? Lo más «complicado» es el esperar que hayan metido 8 dígitos para sacar la letra del NIF/NIE… controlar los eventos. El cálculo en sí está chupao 😉
Wow, nuevo reto. Muchísimas gracias, Ada.
Coincido en que en sí no está difícil el planteamiento, lo que espero que ya no me ocasione problemas sea a la hora de añadirle el manejador de eventos al botón como siempre.
let letra = [«T»,»R»,»W»,»A»,»G»,»M»,»Y»,»F»,»P»,»D»,»X»,»B»,»N»,»J», «Z»,»S»,»Q»,»V»,»H»,»L»,»C»,»K»,»E»];
let digitos_control = {«X»:0,»Y»:1,»Z»:2};
let numero;
let documento;
let expr_reg_nie= false;
let expr_reg_dni = false;
function calcular(){
expr_reg_nie = /^[XYZ]{1}[0-9]{8}$/i;
expr_reg_dni = /^[0-9]{8}$/;
numero = document.getElementById(«numero»).value;
documento = document.getElementById(«documento»).value;
if(expr_reg_nie.test(numero) & documento == «NIE»){
numero = digitos_control[numero.substring(0,1).toUpperCase()]+numero.substring(1,numero.length);
document.getElementById(«letra»).value = calcular_letra(parseInt(numero));
}
if(expr_reg_dni.test(numero) & documento == «DNI»){
document.getElementById(«letra»).value = calcular_letra(parseInt(numero));
}
}
function calcular_letra(numero){
return letra[numero%23];
}
function borrar(){
document.getElementById(«numero»).value = «»;
document.getElementById(«letra»).value = «»;
}
¡Ole, buen trabajo, José Julio!
Hay que ver, cada maestrillo tiene su librillo… yo nunca uso el test para las expresiones regulares, pero es tan válido como cualquier otra opción. Se parece bastante a mi propuesta, jejeje… ya la verás 🙂
Hola Ada. Dejo aquí la resolución al reto en liga de codepen https://codepen.io/Scipio14/details/oNbWdQr.
Gracias a tus consejos es la primera vez que me sale el EventListener en el botón y creo que el código está más ordenado.
Afortunadamente no es un curso de CSS que si no…
Sé que podría haber puesto validaciones con expresiones regulares y un botón para limpiar los campos, pero al menos cumple con lo que se pedía de los inputs y capaz de que intento otra cosa y me sale peor y lo de las expresiones regulares pues aun me hago un lío con ellas.
Al menos es el primer reto que me sale, jejeje.
Gracias por descubrirme codepen.io
Sí, la verdad es que es muy útil. Lo único malo que le veo es que no pudes cargar las imágenes o recursos externos que uses, pero para este tipo de casos, la verdad es que está muy bien
¡Sí! Es genial… hay otras herramientas del estilo 🙂
¿Qué os parece un apartado de herramientas de desarrollo de este estilo? Quizá podría ser interesante… 🙂
Pues sí. Tema para un vídeo.
Estaría genial. Yo la verdad es que solo conozco Codepen y Github pero me encantaría saber de otras y además conocer ventajas y desventajas de cada una
¡Hey, muy bien, Federico, buen trabajo! 🙂
No te preocupes, lo importante era saber hacer el cálculo. El resto son detalles (importantes, por supuesto, pero no tan relevantes para el reto). Echa un ojo cuando suba la solución, que controlo todas estas cositas 😉
¡A seguir!
window.onload = cargaOk;
const LETRAFIN = «TRWAGMYFPDXBNJZSQVHLCKE»;
const LETRAINICIOYFIN = «XYZ»;
let datosIngreso;
let botonCalcular;
let mostrarResultado;
let inicio;
let letraControl;
function cargaOk()
{
datosIngreso = document.getElementById(«ingresoDatos»);
botonCalcular = document.getElementById(«botonConversion»).addEventListener(«click», convertir);
mostrarResultado = document.getElementById(«conversion»);
}
function convertir()
{
if(datosIngreso.value.length === 7 && datosIngreso.value[0] == 0, 1, 2)
{
inicio = LETRAINICIOYFIN.charAt(datosIngreso.value[0]);
letraControl = LETRAFIN.charAt(datosIngreso.value % 23);
mostrarResultado.value = inicio + » » + datosIngreso.value + «-» + letraControl;
}
else if(datosIngreso.value.length === 8)
{
letraControl = LETRAFIN.charAt(datosIngreso.value % 23);
mostrarResultado.value = datosIngreso.value + «-» + letraControl;
}
else
{
alert(«valor ingresado es \»incorrecto\»»);
}
}
¡Vaya, Juan! ¡Esto va tomando forma, ¿eh?! ¡Muy bien!
Las variables tienen nombres representativos, el código está modularizado… ¡y el ejercicio está muy bien planteado!
¡Enhorabuena porque lo estás haciendo muy bien! 🙂
muchísimas gracias!!!
Todo gracias a que tu nos ayudas a mejorar
Hola. Esta es mi primera ocacion en la que comparto mi solucion a los retos que tu propones.
Aca comparto mi codigo.
https://github.com/Bladi-la/hombres-de-paco-reto/blob/40dc0778022d33a31e8f70700bcc9aadcce2b228/reto01-hombres-de-paco.html
Si hay recomendaciones o sugerencias, son bienvenidas.
¡Uau! Veo que has tenido en cuenta muchísimas comprobaciones, ¡buen trabajo, Bladimir! 🙂
La verdad es que tengo poco que decir, ¡está muy bien! Quizá, como siempre digo, lo ideal es separar estructura de estilos y de funcionalidad (HTML de CSS y de JS) pero por comodidad y para subir al repositorio en un ejemplo como este está perfecto.
¡A seguir así! 🙂
Gracias a ti! Me encantan tus videos y Retos! Tienes una manera muy original de incentivar a tus «alumnos» y ayudarles a aprender.
Tendre en cuenta lo de separa los archivos HTML, CSS y JS para una proxima!
¡Me alegro mucho de que te gusten! Pues sí, lo de separar archivos es una muy buena práctica porque te permite mantener el código organizado e independiente 🙂
¡Ya os hablaré del tema en alguna ocasión! 😉