En el siguiente tutorial mostraré el paso a paso para elaborar la siguiente calculadora:
🚩Demo: Calculadora de cupones de dcto.
🚩Repositorio: Código de la calculadora
Código HTML:
Empecemos por la maquetación de html de nuestra calculadora.
Los requerimientos son:
A. Un campo que permita al usuario ingresar el precio base de un artículo x.
B. Un campo que permita al usuario ingresar el nombre del cupón
C. Un botón que permita ingresar la información
D. Una sección en la que podrán suceder 3 escenarios (gracias a JavaScript lograremos esto): mostrar el nuevo precio (con descuento) en caso se ingrese la información correcta, una advertencia en caso se deje algún campo vacío y la indicación de que el cupón no es válido, en caso ocurra ese escenario.
E. Una sección en la que se mostrará el descuento obtenido por el cupón (informativo)
F. Un botón que permita limpiar la información al usuario para facilitar el ingreso de una nueva consulta.
Código JavaScript
El código JavaScript nos va a ayudar a añadir interacción a la calculadora y poder generar la lógica que permita que, al ingresar un cupón, se aplique o no el descuento asociado.
1er paso: capturar elementos HTML en variables JavaScript
A. Capturar el precio ingresado por el usuario.
B. Capturar el nombre del cupón (texto) ingresado por el usuario.
C. Capturar el botón “Aplicar Cupón”. Además, lo asociamos a un evento de click y una tarea que debe realizar cuando el usuario presione dicho botón.
D. Capturar el botón “Limpiar”. Además, lo asociamos a un evento de click y una tarea que debe realizar cuando el usuario presione dicho botón.
E. Capturar el elemento para mostrar el resultado.
F. Capturar el elemento para mostrar la advertencia en caso haya campos vacíos.
G. Capturar el elemento para mostrar el descuento aplicado.
2do paso: Crear un array que va a contener objetos. En esta oportunidad los objetos van a ser los cupones de descuento con las propiedades de:
• Nombre de cupón
• Descuento del cupón
Utilizando el método push vamos a ir agregando a cada uno de los cupones. Gracias a este método, cada cupón se agregará al final del array y de esta forma podemos generar nuevos cupones según sea necesario.
3er paso: Definir la tarea (función) que se va a realizar al hacer click al botón “Aplicar cupón”
✅Establecer que, ante cada click, se vacíen los campos E y G
_
✅Capturar los valores del precio y el nombre del cupón provenientes de los elementos <input> A y B. En el caso del precio lo convertimos a número entero.
_
✅Establecer el estado “el elemento está cerrado” para los elementos E, F y G (elementos que muestran información al usuario) para evitar superposición de información al momento de la interacción.
Por ejemplo: luego de haber hecho una consulta con un cupón válido, hacer una consulta con un campo vacío, lo cual significará que se mostrará una advertencia, pero esta aparecerá encima del resultado anterior.
_
✅Agregar un condicional “if”, cuya condición será que el campo del precio o del nombre del cupón esté vacío.
En caso de que el condicional sea VERDADERO:
Fila 81: Se mostrará la advertencia “No dejes campos en blanco” en el campo F.
Fila 72 y 75: Se harán validaciones previas que eviten superponer un texto encima de otro
Fila 78: Quita la clase “inactive” para permitir que se muestre la advertencia.
En caso de que el condicional sea FALSO
Si no hubo campos vacíos (es decir el usuario completó ambos campos) se harán las verificaciones para evitar superposición de texto.
Fila 84: Si en la consulta anterior se mostró la advertencia, cierra dicho campo
Fila 87: Quita la clase “inactive” para permitir que se imprima el descuento.
Fila 90: Quita la clase “inactive” para permitir que se imprima el resultado.
A continuación, y aun dentro del ELSE, en la fila 96 iniciamos un ciclo FOR que permitirá recorrer cada objeto de nuestro array de cupones.
A cada objeto del array se le aplica un condicional IF (fila 100) cuya condición pregunta si el valor del cupón ingresado en el campo <input> por el usuario es igual a la propiedad “nombre” del objeto i que está recorriendo el ciclo FOR.
<ins>En caso de que el condicional sea VERDADERO:</ins>
Fila 101: Se imprimirá en el respectivo el precio con descuento. En esta fila se aplica la fórmula para calcular el nuevo precio con descuento.
Fila 103: Se imprimirá en el respectivo al descuento asociado al cupón, para que el usuario conozca que descuento tenía asociado su cupón. Se está accediendo a la propiedad “descuento” del objeto.
Afuera del ciclo FOR y aun en el ELSE del IF de la fila 70, respondemos a la siguiente pregunta con un IF adicional: ¿Qué sucede si al cupón ingresado por el usuario no existe?
En caso de que el condicional sea VERDADERO:
Fila 115: Se imprimirá en el respectivo un mensaje indicando que el cupón ingresado no tiene descuento.
Fila 116: Se imprimirá en el respectivo el descuento de CERO.
Código CSS
Finalmente agregamos estilos a nuestra calculadora para darle una mejor experiencia al usuario al interactuar con la calculadora.
Resultado
