隆Buen dia amigos!En este art铆culo, nosotros, como su nombre lo indica, escribiremos una calculadora JavaScript simple.El deseo de escribir una calculadora vino a m铆 despu茅s de ver un tutorial sobre c贸mo crear una "calculadora simple", que result贸 estar lejos de ser simple y realmente no pod铆a hacer nada.Nuestra calculadora ser谩 verdaderamente simple (42 l铆neas de c贸digo, incluidos espacios entre bloques), pero completamente funcional y escalable. Esta maravillosa biblioteca (Math.js)se usar谩 para los c谩lculos . Sin m谩s presentaci贸n, nos ponemos manos a la obra.Nuestro marcado se ve as铆:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.4/math.js"></script>
<div class="calculator">
<output></output>
</div>
Aqu铆 conectamos la biblioteca, creamos un contenedor para la calculadora y un campo para los caracteres de entrada y el resultado.Conectamos estilos:* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: radial-gradient(circle, skyblue, steelblue);
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 320px;
height: 480px;
background: #eee;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(0, 0, 0, 0.2);
}
output {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 40px;
background: #fff;
margin: 10px auto;
border-radius: 5px;
font-size: 1.4em;
font-weight: bold;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3),
inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}
.keyboard {
height: 440px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}
button {
margin: 0.5em 1em;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 1em;
font-weight: bold;
}
Esto es lo que tenemos en este momento: los
botones se generar谩n mediante programaci贸n.Pasamos al gui贸n.Definimos un campo para generar el resultado y creamos un contenedor para el teclado:const output = document.querySelector('output')
const div = document.createElement('div')
div.classList.add('keyboard')
document.querySelector('.calculator').appendChild(div)
Nuestra l铆nea con personajes se ve as铆:'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='
Convierta esta cadena en una matriz y cree botones:
'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='.split(' ')
.map(symbol => {
div.insertAdjacentHTML('beforeend', `<button value="${symbol}">${symbol}</button>`)
})
Encontramos los botones creados y les agregamos un controlador de eventos de clic:document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function () {
calc(this.value)
})
})
Tambi茅n queremos poder ingresar caracteres usando el teclado. Para hacer esto, necesitamos agregar el controlador de eventos "pulsaci贸n de tecla" al objeto "Documento" o "Ventana", luego filtrar los valores innecesarios de la propiedad "clave" de la clave, por ejemplo, usando una expresi贸n regular:document.addEventListener('keydown', event => {
if ((event.key).match(/[0-9%\/*\-+\(\)=]|Backspace|Enter/)) calc(event.key)
})
El m茅todo de coincidencia en este caso desempe帽a el papel de un filtro: no permite pasar un argumento a la funci贸n calc que no coincida con la condici贸n especificada en 茅l.La condici贸n en s铆 es la siguiente: si el valor de event.key es uno de los caracteres indicados entre corchetes ([]; un n煤mero del 0 al 9, signos de divisi贸n, multiplicaci贸n, suma, resta, par茅ntesis de apertura, cierre o un signo igual; barra invertida - escape) o (| - alteraci贸n) Retroceso, o Enter, luego llamamos calc con event.key como par谩metro, de lo contrario no hacemos nada (Shift tambi茅n se descarta con 茅xito).Nuestra funci贸n de c谩lculo principal (y 煤nica) es la siguiente (el c贸digo debe leerse de abajo hacia arriba):
function calc(value) {
if (value.match(/=|Enter/)) {
try {
output.textContent = Math.trunc(math.evaluate(output.textContent))
} catch {
let oldValue = output.textContent
let newValue = ' '
output.textContent = newValue
setTimeout(() => {
output.textContent = oldValue
}, 1500)
}
} else if (value === 'C') {
output.textContent = ''
} else if (value.match(/CE|Backspace/)) {
output.textContent = output.textContent.substring(0, output.textContent.length - 1)
} else {
output.textContent += value
}
}
En conclusi贸n, un par de palabras sobre la escalabilidad declarada y la funcionalidad completa.El m茅todo de evaluaci贸n (anteriormente eval) y otros m茅todos Math.js tienen capacidades muy buenas. En base a estas caracter铆sticas, podemos expandir f谩cilmente la funcionalidad de nuestra calculadora agregando nuevos caracteres y operadores, brindando la posibilidad de trabajar con n煤meros de coma flotante (ajustando el n煤mero de decimales usando el interruptor y el m茅todo "toFixed"), etc.Resultado:GitHub
c贸digo .Gracias por su atenci贸n. Espero que encuentres algo 煤til para ti. Que tengan un buen fin de semana y feliz codificaci贸n.