Javascript Adicionar classe com javascript puro

bigbossbr · 8 de março de 2021

Olá pessoal,

Estou desenvolvendo uma calculadora básica para aprimorar meus conhecimentos em javascript, (sei, é coisa básica hehehe).

Bom, cheguei em um ponto que estou querendo simular o efeito mouseouver porém quando for apertado a tecla no teclado.

Coloquei o código no GIT Hub (https://github.com/jorgekania/calc.git) mais vou colocar parte dele aqui para verem onde estou errando.

Parte do código que faz o mapeamento do teclado como se fosse o click do mouse.

//Mapeamento para ativar o funcionamento pelo teclado
const mapaTeclado = {
    '0': 'tecla0',
    '1': 'tecla1',
    '2': 'tecla2',
    '3': 'tecla3',
    '5': 'tecla5',
    '6': 'tecla6',
    '7': 'tecla7',
    '8': 'tecla8',
    '9': 'tecla9',
    '/': 'operadorDividir',
    '*': 'operadorMultiplicar',
    '-': 'operadorSubtrair',
    '+': 'operadorAdicionar',
    '=': 'igual',
    'Enter': 'igual',
    'Backspace': 'backspace',
    'c': 'limparDisplay',
    'Escape': 'limparCalculo',
    ',': 'decimal'
}

const mapearTeclado = (evento) => {
    const tecla = evento.key;
    const teclaPermitida = () => Object.keys(mapaTeclado).indexOf(tecla) !== -1;

    if (teclaPermitida()) {
        const mouseOver = () => teclaPermitida.style.background = "#e4e4e4";
        const mouseOut = () => teclaPermitida.style.background = "#000";
      
        document.getElementById(mapaTeclado[tecla]).click();
        document.getElementById(mapaTeclado[tecla]).addEventListener("mouseover", mouseOver);
        document.getElementById(mapaTeclado[tecla]).addEventListener("mouseout", mouseOut);
    }
}

document.addEventListener('keydown', mapearTeclado)

GabrielSennaMs · 9 de março de 2021

@bigbossbr Você pode disparar o evento usando o método "dispatchEvent", com algumas modificações no seu código é possível fazer isso.

for (let index in mapaTeclado)
{
    document.getElementById(mapaTeclado[index])
    .addEventListener("mouseover", (event) => {
        event.target.style.background = '#e4e4e4'
    });

    document.getElementById(mapaTeclado[index])
    .addEventListener("mouseout", (event) => setTimeout(
        () => event.target.style.background = '#000',
        400
    ));
}

const mapearTeclado = (evento) =>
{
    let tecla = evento.key;
    let teclaPermitida = () => Object.keys(mapaTeclado).indexOf(tecla) !== -1;

    if (teclaPermitida())
    {
        let 
            event = new MouseEvent('mouseover'),
            event_2 = new MouseEvent('mouseout');

        document.getElementById(mapaTeclado[tecla]).click();
        document.getElementById(mapaTeclado[tecla]).dispatchEvent(event);
        document.getElementById(mapaTeclado[tecla]).dispatchEvent(event_2);
    }
}

Infelizmente você não vai poder usar o efeito de houver do CSS, porém é possível aplicar a propriedade transition, deixa um efeito maneiro.

.calculator button{
    background-color: black;
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.5rem;
    outline: none;
    cursor: pointer;
    border: 2px solid black;
    box-shadow:  2px 2px 0px #555;
    transition: 0.4s;
}

button:hover{
    transition: 0.4s;
    background-color: #e4e4e4;
    color: black;
    box-shadow: inset 2px 2px 0px #555;
    border: 0;
}

bigbossbr · 9 de março de 2021

@GabrielSennaMs Bom dia Gabriel, ficou bacana o efeito, mais o que estou tentando fazer esta ligado ao acionamento da tecla pelo teclado, no passar do mouse o css faz o trabalho, o problema esta no acionamento pelo teclado que estou tentando ver uma forma de criar o mesmo efeito mostrando que a tecla foi acionada.

Sei que é algo que não vai ser usado, é mais para estudo mesmo, posteriormente a solução pode ser usado para um projeto real.

Rui Guilherme · 10 de março de 2021

Você pode identificar a tecla apertada no evento keydown e modificar a classe pelo JavaScript. Fiz um exemplo bem básico para não trabalhar diretamente no seu código.

HTML:

<input type="text" id="calc" name="calc"><br><br>
<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>
<br/>
<button id="button4">4</button>
<button id="button5">5</button>
<button id="button6">6</button>
<br/>
<button id="button7">7</button>
<button id="button8">8</button>
<button id="button9">9</button>

CSS:

.button-hover{
  background-color: green;
}

JavaScript:

document.addEventListener("keydown", event => {
  document.querySelector(`#button${event.key}`).classList.add("button-hover")
  setTimeout(function() {
    document.querySelector(`#button${event.key}`).classList.remove("button-hover")
  }, 500);
})

Segue para ver funcionando: https://codepen.io/ruiguilherme/pen/poNQdzz?editors=1011

bigbossbr · 10 de março de 2021

@Rui Guilherme Opa Rui, obrigado pela dica, não sei porque no navegador não esta funcionando, mais no console ele mostra que a classe foi adicionada e pagou o elemento, vai entender.

Agora estou tentando ajustar um erro maluco de casas decimais, ele coloca as casas decimais de 3 em 3, mais quando passa de 8 caractere ele, começa pular de 4 em 4 hehehe, e quando uso o backspace também, ele ainda não esta atualizando o display, acaba ficando com as casas decimais bagunçadas, detalhes para ir estudando. Como é um projetinho de aprendizado, não pego toda hora nele. Mais quero fazer algumas coisas nela, tipo criar um histórico, criar mais um campo no display para mostrar o valor digitado e a operação em andamento, tipo um acima do outro.

Deixei o código no GIT, caso queiram mexer, fiquem a vontade, a ideia é brincar no código e evoluir ele para ver no que dá.

https://github.com/jorgekania/calc

bigbossbr · 10 de março de 2021

Pessoal, subi no GIT https://github.com/jorgekania/calc algumas atualizações da calculadora, se quiserem sugerir melhorias, serão bem vindas. Lembrando que ela é só fins de estudo e compartilhar o código para quem queria aprender também.

Correções que ainda tenho que fazer:

Ajustar as casas decimais para quantidade grande de números;
Ajustas casas decimais quando é acionado o backspace

Melhorias que quero ainda implementar

Colocar histórico dos cálculos em um botão a parte, ao clicar abre o histórico;
Colocar no visor mais um campo que mostre o valor atual e valor na memória;
Colocar botão para mudar ela para modo cientifica, podendo virar ela na horizontal;

bigbossbr · 11 de março de 2021

Olá pessoal, tudo bem com todos?

Galera, fiz novas implementações em nossa calculadora, esta ficando bacana.

Uma ajuda, estou com aquele probleminha na formatação dos decimais, não sei o porque, quando ele passa de 8 dígitos, ele formata com 4 casas decimais em vez de 3 em 3 como vinha fazendo. Alguma dica do que pode ser? Código atualizado no no GIT https://github.com/jorgekania/calc

DiF · 12 de março de 2021

Senhores, por gentileza, mantenham os códigos postados aqui.

Para futuras consultas. Não tem problema usar o github, desde que use ele só para repositório.

Para mostrar códigos, falhas e dúvidas, postem o código aqui.

bigbossbr · 12 de março de 2021

@DiF Corretíssimo, comida de bola minha, peço desculpas a comunidade.

Pessoal, o projeto da calculadora esta bacana, ao menos eu acho, pois quase não sabia nada de javascript puro.

Ainda tem dois itens que acredito que preciso corrigir;

A questão dos decimais que ainda não entendi o porque do erro;
Acredito que seria bacana se foi aberto o histórico, quando a calculadora for aberta novamente, ela já vir aberta, ou ao contrario se for o caso, penso em fazer isto via cookie, ou localstorage mesmo, o que vocês acham melhor?;
Tem um erro ocorrendo no efeito de abrir o histórico, ele empurra a div em vez de só movimentar a que precisa.

Segue o código até o momento

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Calculadora HTML/JavaScript</title>
</head>

<body>
    <div class="container">
        <div class="calculator" id="calculator">
            <div class="display" id="display">
                <div id="historic"></div>
                <div id="contaAtual"></div>
            </div>
            <div class="calculator-buttons">
                <button id="limparDisplay">CE</button>
                <button id="backspace">⇦</button>
                <button class="porcentagem" id="operadorPorcentagem">%</button>
                <button class="dividir" id="operadorDividir">÷</button>
                <button id="tecla7">7</button>
                <button id="tecla8">8</button>
                <button id="tecla9">9</button>
                <button class="multiplicar" id="operadorMultiplicar">*</button>
                <button id="tecla4">4</button>
                <button id="tecla5">5</button>
                <button id="tecla6">6</button>
                <button class="subtrair" id="operadorSubtrair">-</button>
                <button id="tecla1">1</button>
                <button id="tecla2">2</button>
                <button id="tecla3">3</button>
                <button class="somar" id="operadorAdicionar">+</button>
                <button id="inverter">±</button>
                <button id="tecla0">0</button>
                <button id="decimal">,</button>
                <button class="igual" id="igual">=</button>
            </div>
        </div>
        <div class="historicos" id="historicos">
            <h4>HISTÓRICO DE CÁLCULOS</h4>
            <div class="lista">
                <div class="lista-historico" id="listaHistorico">

                </div>
                <div class="btn-historico" id="btnHistoric">Abrir</div>
            </div>
            <div class="deleteAll" id="deleteAll">✘ limpar</div>
        </div>

    </div>
    <script src="./calc.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;1,800&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #F9F9F9;
    padding: 90px 0;
}
.container{
    width: 100%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.historicos{
    width: 300px;
    background-color: #e0dede;
    border-radius: 0 5px 5px 0;
    margin-left: -300px;
    align-items: center;
    justify-content: flex-end;
}
.historicos h4{
    width: 100%;
    padding: 15px 5px 0 20px;
    font-family: 'Roboto Mono', monospace;
}
.lista{
    display: flex;
    width: 300px;
    background-color: #e0dede;
    border-radius: 0 5px 5px 0;
    align-items: center;
    justify-content: flex-end;
}
.btn-historico{
    background-color: #e0dede;
    width: 35px;
    height: 75px;
    margin-right: -20px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    writing-mode:vertical-rl;
    justify-content: center;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.1rem;
}

.lista-historico{
    width: 100%;
    height: 570px;
    padding: 15px 5px 15px 20px;
    overflow-y: auto;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
}

.apagarItem{
    cursor: pointer;
}

.deleteAll{
    display: block;
    text-align: right;
    padding: 0 15px 15px 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    cursor: pointer;
}

.deleteAll:hover{
    color:rgb(48, 207, 42);
}

.calculator {
    width: 400px;
    background-color: #2b7a43;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px black;
    z-index: 1;
}

.display{
    /* display: flex; */
    justify-content: flex-end;
    width: 100%;
    height: 120px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: rgb(10, 59, 21);
    color: white;
    font: normal 3rem serif;
    overflow: hidden;
    border-radius: 5px;
    box-shadow:  2px 2px 0px rgb(28, 136, 24);
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
}

#historic {
    height: 20px;
    width: 100%;
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    text-align: right;
    font-size: 1rem;
    margin-bottom: 10px;
}

#contaAtual{
    height: 70px;
    width: 100%;
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    text-align: right;
}

.calculator-buttons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
}

.calculator button{
    background-color: rgb(7, 53, 17);
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.5rem;
    outline: none;
    cursor: pointer;
    border: 1px solid rgb(2, 58, 14);
    box-shadow:  2px 2px 0px rgb(28, 136, 24);
    transition: 0.4s;
}

button:hover{
    transition: 0.4s;
    background-color: #e4e4e4;
    color: black;
    box-shadow: inset 2px 2px 0px #555;
    border: 0;
}

.button-hover{
    transition: 0.4s;
    background-color: #e4e4e4;
    color: black;
    box-shadow: inset 2px 2px 0px #555;
    border: 0;
}

#operadorPorcentagem, 
#operadorMultiplicar, 
#operadorSubtrair, 
#operadorAdicionar, 
#igual, 
#operadorDividir{
    font-family: 'Roboto Mono', monospace !important;
    background-color: rgb(60, 90, 20) !important;
    color: white !important;
    padding: 20px !important;
    border-radius: 5px !important;
    font-size: 1.5rem !important;
    outline: none !important;
    cursor: pointer !important;
    border: 2px solid rgb(2, 58, 14) !important;
    box-shadow:  2px 2px 0px rgb(28, 136, 24) !important;
    transition: 0.4s !important;
}

#operadorPorcentagem:hover, 
#operadorMultiplicar:hover, 
#operadorSubtrair:hover, 
#operadorAdicionar:hover, 
#igual:hover, 
#operadorDividir:hover{
    transition: 0.4s !important;
    background-color: #e4e4e4 !important;
    color: black !important;
    box-shadow: inset 2px 2px 0px #555 !important;
    border: 2px solid rgb(2, 58, 14) !important;
}

JAVASCRIPT

'use strict';

//Constantes a serem usadas
const display = document.getElementById('display');
const historic = document.getElementById('historic');
const contaAtual = document.getElementById('contaAtual');
const numeros = document.querySelectorAll('[id*=tecla]');
const operadores = document.querySelectorAll('[id*=operador]');
const backspace = document.getElementById('backspace');
const qtdCaractere = 11;
const colorBasic = '#fff';
const colorError = 'yellow';

//Variáveis a serem usadas
let novoNumero = true;
let opPercent = false;
let igualAtivado = false;
let numeroAtual;
let operador;
let numeroAnterior;
let resultado;
let txt;

//===============================================
//Preencher o histórico lateral da calculadora
//===============================================
const getHistoric = () => JSON.parse(localStorage.getItem('hCalc')) ?? [];
const setCalc = (banco) => localStorage.setItem('hCalc', JSON.stringify(banco));

//Atualiza a lista de histórico na div lateral
const criarHistoricoCalculo = (numA, op, numB, res, indice) => {

    const itens = document.getElementById('listaHistorico');
    const newItem = document.createElement('div');

    newItem.innerHTML = `
        ===================================<br>
        <input type="button" class="apagarItem" id="apagarItem" data-indice="${indice}" value=" ✘ "> » ${parseFloat(numA).toLocaleString('BR')} ${op} ${parseFloat(numB).toLocaleString('BR')} = ${parseFloat(res).toLocaleString('BR')}<br>`;
    itens.appendChild(newItem);
}

const limparHistorico = () => {
    const listaHistorico = document.getElementById('listaHistorico');
    while (listaHistorico.firstChild) {
        listaHistorico.removeChild(listaHistorico.lastChild);
    }
}

const atualizaHist = () => {
    limparHistorico();
    const banco = getHistoric();
    banco.forEach((item, indice) => criarHistoricoCalculo(item.numeroAnterior, item.operador, item.numeroAtual, item.resultado, indice));
}

const novoCalculo = () => {
    const banco = getHistoric();
    banco.push({
        "numeroAnterior": numeroAnterior,
        "operador": operador,
        "numeroAtual": numeroAtual,
        "resultado": resultado
    });
    setCalc(banco);
    atualizaHist();
}

const apagarCalculo = (event) => {
    const elemento = event.target;
    if (elemento.type === 'button') {
        const indice = elemento.dataset.indice;
        removeCalc(indice);
    }
}

const removeCalc = (indice) => {
    const banco = getHistoric();
    banco.splice(indice, 1);
    setCalc(banco);
    atualizaHist();
}

const deleteAll = () => {
    localStorage.clear()
    atualizaHist();
}

atualizaHist();
document.getElementById('listaHistorico').addEventListener('click', apagarCalculo);
document.getElementById('deleteAll').addEventListener('click', deleteAll);

//===============================================
////Preencher o histórico lateral da calculadora
//===============================================

//Se tiver operação pendente
let operacaoPendente = () => operador !== undefined

//Método para fazer o cálculo
const calcular = () => {

    if (operacaoPendente()) {

        console.warn('%c ----> INICIANDO O CALCULAR', 'color: red; font-size: 15px; font-weight: bold')

        numeroAtual = contaAtual.textContent.replace('.', '');
        numeroAtual = numeroAtual.replace(',', '.')
        numeroAnterior = numeroAnterior.replace(',', '.');

        if (operador == '÷') {
            operador = '/';
        }

        novoNumero = true;
        resultado = eval(`${numeroAnterior}${operador}${numeroAtual}`);

        novoCalculo();
        atualizaHist();

        console.log('%c --------> Valor Pendente: ' + numeroAnterior, 'color: blue')
        console.log('%c --------> Valor Atual: ' + numeroAtual, 'color: blue')
        console.log('%c --------> Operador: ' + operador, 'color: blue')
        console.log('%c --------> Resultado: ' + resultado, 'color: blue')

        atualizarDisplay(resultado);
    }
}

//Atualiza o histórico no display
const displayHistoric = () => {

    console.warn('%c ----> COLOCANDO OPERAÇÃO NO HISTÓRICO', 'color: red; font-size: 15px; font-weight: bold')

    if (operador == '/') {
        operador = '÷'
    }

    if (operacaoPendente()) {
        if (opPercent) {

            console.warn('%c ----> PORCENTAGEM COLOCADA NO HISTÓRICO', 'color: red; font-size: 15px; font-weight: bold')

            historic.textContent = numeroAnterior + operador + numeroAtual;
            atualizarDisplay(resultado);
            opPercent = false;

            console.log('%c --------> - Histórico Número Atual:  ' + numeroAtual, 'color: blue')

        } else {

            if (igualAtivado) {
                historic.textContent = numeroAnterior + operador + numeroAtual + '=';

                console.log('%c --------> - Histórico Número Atual:  ' + numeroAtual, 'color: blue')

                igualAtivado = false;
            } else {
                historic.textContent = numeroAnterior + operador;
            }
        }
    }
    console.log('%c --------> - Histórico Operador Atual:  ' + operador, 'color: blue')
    console.log('%c --------> - Histórico Numero Anterior: ' + numeroAnterior, 'color: blue')
}


//Método para atualizar o display
const atualizarDisplay = (texto) => {

    console.warn('%c ----> INICIANDO O ATUALIZAR DISPLAY', 'color: red; font-size: 15px; font-weight: bold')

    contaAtual.style.color = colorBasic;
    //Limitar a quantidade de carácter no display
    if (contaAtual.textContent.length >= qtdCaractere) {

        limparCalculo();
        contaAtual.textContent = '☠ Erro';
        contaAtual.style.color = colorError;

        console.warn('%c ----> DISPLAY COM MAIS DE 10 DÍGITOS', 'color: red; font-size: 20px; font-weight: bold')

    } else {

        if (novoNumero) {

            console.warn('%c ----> NOVO NÚMERO DETECTADO', 'color: red; font-size: 15px; font-weight: bold')

            contaAtual.textContent = texto.toLocaleString('BR');
            novoNumero = false;

        } else {

            console.warn('%c ----> JÁ NÃO É MAIS NOVO NÚMERO ', 'color: red; font-size: 15px; font-weight: bold')

            contaAtual.textContent += texto;

            //Mostrar no display os dígitos e resultado
            contaAtual.style.color = colorBasic;

            let [partInt, partDec] = contaAtual.textContent.split(',');
            let v = '';
            let c = 0;
            partInt = partInt.replace('.', '');

            console.log('%c --------> Part Int: ' + partInt + ' » Part Dec: ' + partDec, 'color: green')
            console.log('%c --------> Inicio do for: ' + c, 'color: blue')

            //Formata de 3 em 3 casas no contaAtual
            for (let i = partInt.length - 1; i >= 0; i--) {

                if (++c > 3) {
                    v = '.' + v;
                    c = 0;
                }

                v = partInt[i] + v;

            }

            console.log('%c --------> Final do For: ' + c, 'color: blue')

            v = v + (partDec ? ',' + partDec : '');

            console.log('%c --------> Valor de v2:  ' + v, 'color: blue')

            contaAtual.textContent = v;
        }
        console.log('%c --------> Total de dígitos na Memória:  ' + contaAtual.textContent.length, 'color: blue')
        console.log('%c --------> Valor do display agora: ' + contaAtual.textContent, 'color: blue')
    }
};

const inserirNumero = (evento) => atualizarDisplay(evento.target.textContent);
numeros.forEach(numero => numero.addEventListener('click', inserirNumero));


//Responsável por verificar qual operador foi selecionado
//Caso seja selecionado % será efetuado o cálculo aqui
//Outro operador, mando para o calcular()
const selecionarOperador = (evento) => {

    console.warn('%c ----> OPERADOR SELECIONADO ', 'color: red; font-size: 15px; font-weight: bold')

    if (!novoNumero) {

        if (evento.target.textContent == '%') {

            opPercent = true;
            numeroAtual = parseFloat(contaAtual.textContent.replace(',', '.'));

            console.warn('%c ----> OPERAÇÃO DE PORCENTAGEM ATIVADA', 'color: red; font-size: 15px; font-weight: bold')
            console.log('%c --------> Valor Atual: ' + numeroAtual, 'color: blue')

            if (operador == '*') {

                numeroAtual = (numeroAtual / 100);
                numeroAnterior = numeroAnterior.replace(',', '.');
                novoNumero = true;
                resultado = eval(`${numeroAnterior}${operador}${numeroAtual}`);

            } else {
                numeroAtual = (numeroAnterior * (numeroAtual / 100));
                numeroAnterior = numeroAnterior.replace(',', '.');
                novoNumero = true;
                resultado = eval(`${numeroAnterior}${operador}${numeroAtual}`);

            }

            novoCalculo();
            atualizaHist();

            console.log('%c --------> Valor Atual Convertido: ' + numeroAtual, 'color: blue')
            console.log('%c --------> Valor a Calcular: ' + numeroAnterior, 'color: blue')
            console.log('%c --------> Operador: ' + operador, 'color: blue')
            console.log('%c --------> Resultado: ' + resultado, 'color: blue')

            displayHistoric();
            operador = undefined;
        } else {

            calcular();

            operador = evento.target.textContent;
            novoNumero = true;
            numeroAnterior = contaAtual.textContent.replace('.', '');

            console.log('%c --------> Operador Atual: ' + operador, 'color: blue')
            console.log('%c --------> Valor Atual: ' + contaAtual.textContent, 'color: blue')
            console.log('%c --------> Valor Pendente: ' + numeroAnterior, 'color: blue')

            displayHistoric();
        }
    } else {
        operador = evento.target.textContent;

        console.log('%c --------> Operador Atual: ' + operador, 'color: blue')
        console.log('%c --------> Valor Atual: ' + contaAtual.textContent, 'color: blue')
        console.log('%c --------> Valor Pendente: ' + numeroAnterior, 'color: blue')
        displayHistoric();
    }
}
operadores.forEach(operador => operador.addEventListener('click', selecionarOperador));


//Quando clicado no Botão igual
const ativarIgual = () => {

    console.warn('%c ----> IGUAL ATIVADO ' + operador, 'color: red; font-size: 15px; font-weight: bold')

    igualAtivado = true;

    calcular();
    displayHistoric();
    operador = undefined;

}
document.getElementById('igual').addEventListener('click', ativarIgual);


//Apagar display último número digitado
//Apagar histórico do display
const limparDisplay = () => contaAtual.textContent = '';
const limparHistoric = () => historic.textContent = '';
document.getElementById('limparDisplay').addEventListener('click', limparDisplay);


//Limpar Calculo total
const limparCalculo = () => {
    console.warn('%c ----> LIMPAR DISPLAY ATIVADO', 'color: red; font-size: 15px; font-weight: bold')
    console.warn('%c ----> LIMPAR HISTÓRICO ATIVADO', 'color: red; font-size: 15px; font-weight: bold')
    limparDisplay();
    limparHistoric();
    operador = undefined;
    novoNumero = true;
    numeroAnterior = undefined;
    console.clear()
}
document.getElementById('limparDisplay').addEventListener('click', limparCalculo);


//Backspace
const removerUltimoNumero = () => {

    console.warn('%c ----> REMOVER ÚLTIMO NÚMERO ATIVADO ', 'color: red; font-size: 15px; font-weight: bold')
    contaAtual.textContent = contaAtual.textContent.slice(0, -1);
}
backspace.addEventListener('click', removerUltimoNumero);


//Botão Positivo ou Negativo
const inverterSinal = () => {
    console.warn('%c ----> INVERTER SINAL ATIVADO ', 'color: red; font-size: 15px; font-weight: bold')
    novoNumero = true;
    atualizarDisplay(contaAtual.textContent * -1)
}
document.getElementById('inverter').addEventListener('click', inverterSinal);

//Botão Virgula ou Decimal
const inserirDecimal = () => {

    console.warn('%c ----> INSERIR DECIMAL ATIVADO ', 'color: red; font-size: 15px; font-weight: bold')

    if (novoNumero) {
        contaAtual.textContent = '0,';
        novoNumero = false;
    } else {
        if (contaAtual.textContent.indexOf(',') == -1) {
            contaAtual.textContent += ',';
        }
    }
}
document.getElementById('decimal').addEventListener('click', inserirDecimal);

//Mapeamento para ativar o funcionamento pelo teclado
const mapaTeclado = {
    '0': 'tecla0',
    '1': 'tecla1',
    '2': 'tecla2',
    '3': 'tecla3',
    '4': 'tecla4',
    '5': 'tecla5',
    '6': 'tecla6',
    '7': 'tecla7',
    '8': 'tecla8',
    '9': 'tecla9',
    '/': 'operadorDividir',
    '*': 'operadorMultiplicar',
    '-': 'operadorSubtrair',
    '+': 'operadorAdicionar',
    '%': 'operadorPorcentagem',
    '=': 'igual',
    'Enter': 'igual',
    'Backspace': 'backspace',
    'c': 'limparDisplay',
    'Escape': 'limparDisplay',
    ',': 'decimal'
}

const mapearTeclado = (evento) => {
    const tecla = evento.key;
    const teclaPermitida = () => Object.keys(mapaTeclado).indexOf(tecla) !== -1;

    if (teclaPermitida()) {
        document.getElementById(mapaTeclado[tecla]).click();

        document.getElementById(mapaTeclado[tecla]).classList.add("button-hover");

        setTimeout(function () {
            document.getElementById(mapaTeclado[tecla]).classList.remove("button-hover");
        }, 500);
    }
}

document.addEventListener('keydown', mapearTeclado)

//Ativa a div para mostrar o histórico de operações feitas
const openHistoric = () => {

    const hist = document.getElementById('historicos');
    const btnHist = document.getElementById('btnHistoric');
    let pos = 0;
    let posLeft = -300;
    let id = setInterval(function () {
        if (pos == 300) {

            if (btnHist.textContent == 'Abrir') {
                btnHist.textContent = 'Fechar';
            } else {
                btnHist.textContent = 'Abrir';
            }

            clearInterval(id);
        } else {
            pos++;
            posLeft++;

            if (btnHist.textContent == 'Abrir') {
                hist.style.marginLeft = posLeft + 'px';
                hist.style.marginRright = pos + 'px';
            } else {
                hist.style.marginLeft = -pos + 'px';
                hist.style.marginRright = pos + 'px';
            }
        }
    }, 1);
}

document.getElementById('btnHistoric').addEventListener('click', openHistoric);

atualizaHist();

//Para ativar calculadora no popup
function popup() {
    let altura = document.getElementById('calculator').clientHeight;
    let largura = document.getElementById('calculator').clientWidth;
    let janela = 'index.html';
    window.open(janela, 'popup', 'width=' + largura + ',height=' + altura + ', scrollbars=no, titlebar=no, location=no, status=no, menubar=no, directories=no, resizable=no, top=0, left=0')
}