Cree una calculadora usando JavaScript, HTML y CSS en 2022

Publicado: 2021-01-02

Ya sea que esté aprendiendo un nuevo lenguaje de programación o un marco de desarrollo, llega un momento en el que tiene que trabajar en proyectos del mundo real. A medida que avanza en el tema, debe probar sus habilidades y comprensión del idioma. Construir un proyecto utilizando tecnología o marco recién aprendido es una buena idea. Hay muchas ideas disponibles en línea sobre lo que debe crear con su conocimiento.

Las sugerencias que se encuentran con más frecuencia incluyen una calculadora en JavaScript y una lista de tareas pendientes. Si bien parecen fáciles, puede ser una gran tarea cuando comienzas a trabajar en estos proyectos. Aquí, vamos a hacerlo fácil y lógico, así como lleno de acontecimientos para usted.

¿Empezamos?

Tabla de contenido

Lógica ante todo

Cuando comienza a trabajar en un proyecto, ya sea una calculadora o una lista de tareas pendientes, lo primero que debe identificar es la lógica.

¿Cómo funciona la calculadora?

  1. Suma dos o más números (cualquier número de dígitos) usando las teclas numéricas dadas en la calculadora.
  2. Luego realiza funciones aritméticas fundamentales, es decir, suma, resta, multiplicación y división en estos números.
  3. La calculadora debe poder calcular y dar las soluciones correctas.

Esta es la premisa de su herramienta calculadora. Por lo tanto, necesita un teclado, una unidad de visualización y elementos funcionales.

El botón "igual a" evaluará la respuesta, mientras que el botón "borrar" asegurará la eliminación de todas las entradas en la pantalla de la calculadora.

Aprenda cursos de desarrollo de software en línea de las mejores universidades del mundo. Obtenga programas Executive PG, programas de certificados avanzados o programas de maestría para acelerar su carrera.

Abordar el proyecto: clave para construir el código

En lugar de dirigirse al código de inmediato, debe aprender a abordar un nuevo proyecto. Tiene dos cosas listas para usted: la lógica y una comprensión básica de las tecnologías front-end, es decir, JavaScript, HTML y CSS.

Antes de comenzar a construir su calculadora usando JavaScript , necesita lo siguiente:

  1. Un entorno de desarrollo integrado que le ayudará a construir su proyecto utilizando las tres tecnologías.
  2. Un servidor local que lo ayudará a probar sus códigos y eliminar los errores. Como resultado, podrá lanzar la aplicación más rápido y con mayor agilidad.

#1 Primeros pasos con HTML

El primer paso es ensuciarse un poco las manos con HTML para que haya creado el esquema para su calculadora.

Hay diez botones en la calculadora, que van del 0 al 9. HTML es responsable de construir las claves para cada dígito.

Aparte de esto, necesitará usar HTML para crear claves separadas para las diferentes funciones aritméticas también cuando construya una calculadora usando JavaScript .

Puede usar HTML para agregar el botón para mostrar los dígitos ingresados ​​o los resultados, así como para borrar la pantalla.

La unidad visual de su calculadora depende completamente de HTML y CSS, de los cuales los botones y sus ID deben crearse utilizando HTML.

El Código Repetitivo

<!DOCTYPEhtml>

<html lang=”es”>

<cabeza>

<juego de caracteres meta=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<enlace rel=”hoja de estilo” type=”text/css” href=”css/styles.css”>

<título>Calculadora</título>

</cabeza>

<cuerpo>

El código real para crear el esquema de la calculadora

(

<!– calculadora –>

<clase div=”calculadora”>

<!– mostrar –>

<tipo de entrada = "texto" clase = "mostrar" deshabilitado>

<!– teclas –>

<clase div=”claves”>

<!– 4 filas de teclas –>

<div clase=”fila”>

<valor del botón=”7″>7</botón>

<valor del botón=”8″>8</botón>

<valor del botón=”9″>9</botón>

<valor del botón=”+” clase=”operador”>+</botón>

</div>

<div clase=”fila”>

<valor del botón=”4″>4</botón>

<valor del botón=”5″>5</botón>

<valor del botón=”6″>6</botón>

<valor del botón=”-” clase=”operador”>-</botón>

</div>

<div clase=”fila”>

<valor del botón=”1″>1</botón>

<valor del botón=”2″>2</botón>

<valor del botón=”3″>3</botón>

<valor del botón=”*” clase=”operador”>*</botón>

</div>

<div clase=”fila”>

<valor del botón=”C” clase=”operador”>C</botón>

<valor del botón=”0″>0</botón>

<valor del botón=”/” clase=”operador”>/</botón>

<valor del botón=”=” clase=”operador”>=</botón>

</div>

</div>

</div>

<!– termina el cuerpo de la calculadora –>

<tipo de script=”texto/javascript” src=”js/script.js”></script>

</cuerpo>

</html>

Aprenda: Los 20 mejores proyectos de Javascript en Github para principiantes

#2 Estilo con CSS

Una vez que haya definido la estructura de la calculadora, utilizará los elementos CSS en línea para diseñar su calculadora y hacerla visualmente atractiva y fácil de usar.

Si bien el CSS en línea es excelente cuando se trata de diseñar y diseñar la apariencia de su aplicación, es posible que no sea compatible con SEO. Aparte de esto, también puede usar elementos CSS externos etiquetándolos en el mismo directorio raíz. Incluso puede usar elementos CSS internos o incrustados que están presentes dentro de las etiquetas <style></style> dentro de la sección principal.

Aquí, lo guiaremos a través del código que puede usar para diseñar su calculadora.

(Puede crear variaciones de este código si lo desea).

/* estilos comunes */

* {

relleno: 0;

margen: 0;

}

cuerpo {

ancho: 100vw;

altura: 100vh;

desbordamiento: oculto;

pantalla: flexible;

justificar-contenido: centro;

alinear elementos: centro;

color de fondo: #222831;

familia tipográfica: sans-serif;

}

/* terminan los estilos comunes */

/* calculadora */

.calculadora {

ancho: 300px;

relleno inferior: 15px;

borde-radio: 7px;

color de fondo: #000;

sombra de caja: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);

}

/* fin del estilo de la calculadora */

/* mostrar */

.mostrar {

ancho: 100%;

altura: 80px;

borde: ninguno;

tamaño de caja: caja de borde;

relleno: 10px;

tamaño de fuente: 2rem;

color de fondo: #00ff44;

color: #000;

alineación de texto: derecha;

borde-superior-izquierda-radio: 7px;

borde-superior-derecha-radio: 7px;

}

/* fin del estilo de visualización */

/* fila */

.fila {

pantalla: flexible;

justificar-contenido: espacio-entre;

}

/* final del estilo de fila */

/* botón */

botón {

ancho: 50px;

altura: 50px;

borde-radio: 50%;

borde: ninguno;

contorno: ninguno;

tamaño de fuente: 1,5 rem;

color de fondo: #222;

color: #fff;

margen: 10px;

}

botón: flotar {

cursor: puntero;

}

/* final del estilo del botón */

/* operador */

.operador {

color de fondo: #00ff44;

color: #000;

}

/* final del estilo del operador */

#3 Agregar funcionalidad con JavaScript

Ahora hemos discutido en detalle los aspectos visibles de construir una calculadora usando JavaScript . Hagamos algunas secuencias de comandos para ayudar a que la calculadora funcione y realice las tareas de cálculo. Comprenderemos los pocos pasos que están involucrados en la construcción del código JS, lo que lo ayudará a desarrollar el código más rápido.

  • Deberá llamar a las etiquetas HTML que ha creado para funciones individuales usando JavaScript. Utilizará selectores para llamar a cada una de estas entradas y almacenarlas en una variable. Para cada función, necesitará una variable. Por ejemplo, hay una variable separada para mostrar, los dígitos, la función de limpieza y la función igual a. En este caso se puede utilizar la función getElementbyID().
  • Digamos que desea realizar un cálculo simple de 20+30, primero llamará a 20 utilizando el método mencionado anteriormente. Antes de llamar a 30 y la función aritmética, deberá almacenar el 20 previamente llamado en alguna parte. Su código debe dejar espacio para el almacenamiento temporal de los números para facilitar los cálculos. Una matriz vacía contendrá el número como una cadena. Una vez que haya agregado el otro número y la función aritmética, usando eval(), puede evaluar los números y obtener la respuesta.
  • Cuando hace clic en los botones de la calculadora, desea obtener algunos resultados, ya sea que se muestren o se evalúen. Para este propósito, debe agregar detectores de eventos a su código. De esta manera, los botones escucharán el clic. Cuando agrega funciones a los detectores de eventos, automáticamente realizarán la tarea en el sonido del clic.
  • La unidad de visualización debe devolver el valor del botón en el que hace clic. Puede usar el objeto event.target, ya que devolverá el valor del elemento en el que ocurrió el evento. Por ejemplo, desea que se muestre el número "1" tan pronto como haga clic en él. Para ello, deberá almacenar el número en forma de variable. Usando la función "si", comparará la variable existente para identificar si es cero o no. En caso de que sea un cero, lo agregará a una cadena vacía para que ningún número comience con cero. Por último, agregará el contenido de la tecla "1" a la variable de visualización. Como resultado, tan pronto como se active la tecla numérica, verá el contenido en el cuadro de visualización.
  • Por último, debe crear la función que ayudará a aplicar operaciones matemáticas a los números mostrados. Asegúrese de que su calculadora en JavaScript pueda realizar los cálculos matemáticos con facilidad. Para habilitar esta funcionalidad, puede utilizar una combinación de sintaxis y métodos. Hemos especificado el código para los elementos de JavaScript a continuación para su lectura.

// selecciona todos los botones

const botones = document.querySelectorAll('boton');

// seleccione el elemento <input type=”text” class=”display” disabled>

const pantalla = documento.querySelector('.pantalla');

// agrega eventListener a cada botón

botones.forEach(función(botón) {

button.addEventListener('clic', calcular);

});

// calcula la funcion

función calcular (evento) {

// valor actual de los botones pulsados

const clickedButtonValue = event.target.value;

if (valor del botón pulsado === '=') {

// verifique si la pantalla no está vacía, solo haga el cálculo

if (mostrar.valor !== ”) {

// calcular y mostrar la respuesta a mostrar

mostrar.valor = eval(mostrar.valor);

}

} else if (clickedButtonValue === 'C') {

// borrar todo lo que se muestra

mostrar.valor = ”;

} demás {

// de lo contrario, concatenarlo a la pantalla

display.value += clickedButtonValue;

}

}

Debe leer: Explicación de la arquitectura y los componentes de Java

Resumiendo

Ya sea que esté construyendo una calculadora en JavaScript o trabajando en un proyecto más complejo, la idea es desglosar los contenidos de una manera lógica e interpretada. Esto lo ayudará a derivar la sintaxis exacta y lo llevará a una aplicación web fluida. En lugar de comenzar con la codificación directamente, intente comprender cuál es el propósito real de la tecnología que está utilizando y lo llevará al código.

Si está interesado en obtener más información sobre Java, desarrollo de software de pila completa, consulte el programa Executive PG de upGrad & IIIT-B en desarrollo de software: especialización en desarrollo de pila completa, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de formación rigurosa. , más de 9 proyectos y asignaciones, estado de exalumno de IIIT-B, proyectos finales prácticos prácticos y asistencia laboral con las mejores empresas.

Aterrice en el trabajo de sus sueños

Solicite la certificación PG vinculada al trabajo de upGrad en ingeniería de software