├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | ## Link al curso completo de Javascript en Youtube:
2 | [VIDEO CURSO GRATIS COMPLETO: JavaScript Desde Cero por Sergie Code](https://youtu.be/N8Xt5rP_DUo)
3 |
4 |
5 | # Tutorial de Calculadora en JavaScript
6 |
7 | Link para ver resultado: [CALCULADORA TRABAJO TERMINADO](https://calculadora-tutorial-js.netlify.app/)
8 |
9 | Este es un tutorial que te guiará a través del proceso de creación de una calculadora utilizando JavaScript. El código HTML y CSS necesario para la interfaz de la calculadora estará disponible en el repositorio, por lo que nos centraremos en explicar el funcionamiento del código JavaScript a continuación.
10 |
11 | ## Funciones Principales
12 |
13 | ### `agregarALaPantalla(value)`
14 |
15 | Esta función se encarga de agregar el valor proporcionado a la pantalla de la calculadora. Recibe un parámetro `value` que representa el valor que se debe agregar. Utiliza `document.getElementById('pantalla')` para obtener el elemento de la pantalla por su identificador y luego actualiza el valor del campo `value` concatenando el nuevo valor.
16 |
17 | function agregarALaPantalla(value) {
18 | document.getElementById('pantalla').value += value;
19 | }
20 |
21 | ### `calcular()`
22 |
23 | La función `calcular()` se ejecuta cuando se presiona el botón de igual (=) en la calculadora. Primero, obtiene el valor actual de la pantalla utilizando `document.getElementById('pantalla').value`. Luego, utiliza la función `eval()` para evaluar la expresión matemática representada por el valor de la pantalla. El resultado se almacena en la variable `result`. Finalmente, se actualiza el valor de la pantalla con el resultado calculado.
24 |
25 | function calcular() {
26 | const valorPantalla = document.getElementById('pantalla').value;
27 | const result = eval(valorPantalla);
28 | document.getElementById('pantalla').value = result;
29 | }
30 |
31 | Es importante tener en cuenta que el uso de `eval()` puede presentar riesgos de seguridad si se permite que los usuarios ingresen código arbitrario. En este caso, asumimos que el código solo se ejecutará en un entorno seguro.
32 |
33 | ### `limpiarPantalla()`
34 |
35 | La función `limpiarPantalla()` se utiliza para borrar el contenido de la pantalla de la calculadora. Simplemente asigna una cadena vacía al campo `value` del elemento de la pantalla.
36 |
37 | function limpiarPantalla() {
38 | document.getElementById('pantalla').value = '';
39 | }
40 |
41 | ## Integración con HTML y CSS
42 |
43 | Para utilizar estas funciones, asegúrate de tener un elemento HTML con el id "pantalla" que represente la pantalla de la calculadora. Puedes ver el código HTML y CSS correspondiente en los archivos proporcionados en el repositorio.
44 |
45 | Recuerda que puedes personalizar la interfaz y agregar más funcionalidades según tus necesidades.
46 |
47 | ¡Ahora estás listo para crear tu propia calculadora en JavaScript! Sigue este tutorial y diviértete explorando el mundo de la programación web.
48 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Calculadora
9 |
10 |
11 |
12 |
13 |