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ú cómo lo harías? ¡Espero tus propuestas 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…
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.
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.
¡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í! 🙂
¡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