/* Clase creada para hacer los cálculos
con datos NUMÉRICOS */
class Calculadora {
sumar(num1, num2){
return num1 + num2
}
restar(num1, num2){
return num1 - num2
}
dividir(num1, num2){
return num1 / num2
}
multiplicar(num1, num2){
return num1 * num2
}
}
const querySelector = (selector) => {
return document.querySelector(selector)
}
const pantalla = querySelector('.pantalla')
const contenedor = querySelector('.contenedor')
//la instancia display controla la lógica definida dentro
//de la clase Display ya que no se puede utilizar una clase
//directamente porque es como un molde o modelo y
//hasta que no se crea una instancia(que sería un objeto)
//no se pueden acceder a sus datos, funciones ,etc... almacenados.
const display = new Display(pantalla)
contenedor.addEventListener('click',(e)=>{
//target será el elemento padre o el mismo elemento
//clicado en sí que tenga como atributo 'data-id',
//cuando usas selectores de atributos con métodos como:
// .querySelector(), .querySelectorAll(), o .closest(), los corchetes ([]) se utilizan para buscar elementos basados en un atributo específico del HTML
//El método closest() en JavaScript se utiliza para encontrar el ancestro más cercano de un elemento que coincida con un selector CSS, ejemplo: const parent = paragraph.closest('#parent')
const target = e.target.closest('[data-id]')
if(!target) return//si no existe en su elemento padre o en el elemento clicado NO se ejecuta nada del resto del código
const dataId = target.dataset.id
const content = target.textContent
switch (dataId) {
case 'sumar':
case 'restar':
case 'multiplicar':
case 'dividir':
case 'porcentaje':
display.computar(dataId)
break;
case '=':
display.calcula()
break;
case 'borrar':
display.borrar()
break;
case 'C':
display.eliminar()
break;
default:
display.agregarNumero(content)
break;
}
})
class Display{
constructor(pantalla){
this.pantalla = pantalla
this.calculos = new Calculadora()
this.valorActual = ''
this.valorAnterior = ''
this.operacion = undefined
this.signos ={
sumar: '+',
restar: '-',
multiplicar: '*',
dividir: '/',
}
}
borrar(){
this.valorActual = this.valorActual.toString().slice(0,-1)
this.imprimirValores()
}
eliminar(){
this.valorActual = ''
this.valorAnterior = ''
this.operacion = undefined
this.imprimirValores()
}
computar(tipoDeOperacion){
if (this.valorActual === '') return;
if (this.valorAnterior !== '') {
this.calcula();
}
this.operacion = tipoDeOperacion
this.valorAnterior = this.valorActual
this.valorActual = ''
this.imprimirValores()
}
imprimirValores(){
this.pantalla.textContent = `${this.valorAnterior} ${this.signos[this.operacion] || ''} ${this.valorActual}`;
}
agregarNumero(numero){
if(numero === '.' && this.valorActual.includes('.')) return
this.valorActual = this.valorActual.toString() + numero.toString()
this.imprimirValores()
}
calcula(){
const valorActualNumero = parseFloat(this.valorActual);
const valorAnteriorNumero = parseFloat(this.valorAnterior);
if (isNaN(valorActualNumero) || isNaN(valorAnteriorNumero)) return;
this.valorActual = this.calculos[this.operacion](valorAnteriorNumero, valorActualNumero);
this.operacion = undefined;
this.valorAnterior = '';
this.imprimirValores();
}
}