Para começar a programar a calculadora que irá usar HTML, CSS e JS, começaremos criando os três arquivos que serão usados com os respectivos nomes: calculadora.html; estilos.css e funções.js (nada de acentos em nomes de arquivos).

Abra o código do arquivo calculadora.html e digite o código abaixo, que fará a chamada do arquivo .css necessário aos estilos da página html:

Abra agora o arquivo estilo.css e comece configurando a tag body com os parâmetros abaixo:

Agora, deve-se gerar as duas DIVs que serão usadas no projeto, chamadas de: #display e #button. Adicione o código a seguir abaixo da configuração do body:

O principal elemento que será usado nesse programa serão os botões. Apesar de criarmos posteriormente uma classe de para os botões, faremos uma pré configuração que será sobre a tag button, inclusive com a configuração hover (opção de passar em cima do botão com o mouse):

Iremos retornar ao código html e adicionar todos esses botões que serão usados no programa:

Salve tudo e veja o resultado. Abrindo o arquivo calculadora.html, o resultado será esse:

Adicione a class botoes que irá organizar os elementos (nesse caso, os botões):

Executando o arquivo num Browser. O resultado será esse:

Precisamos estilizar diferentes botõe para que a calculadora tenha o resultado desejado. Continuando no arquivo estilos.css , adicione os seguintes comandos:

Deve-se retornar ao arquivo .html e adicionar as classes em cada um dos botões e já adicione na linha 35 o script que chama o arquivo funções.js que estarão as funç~eos javascript necessárias à calculadora:

Finalmente ficará assim:

Abrindo o arquivo funcoe.js adicione o código javascript a seguir:

Essas quatro funções em JavaScript são usadas para controlar um visor de calculadora na tela (através de um campo HTML com id="display").
Aqui está a explicação de cada uma delas:

1. adicionar(valor)

function adicionar(valor) {
        document.getElementById("display").value += valor;
    }

Ele Adiciona um número ou operador (como +, -, *) ao final do texto que já está no visor. Dessa forma, o operador += junta (concatena) o novo valor ao texto atual do elemento com id="display".

2. limpar()

function limpar() {
        document.getElementById("display").value = "";
    }

Nessa parte do código ele apaga tudo o que está escrito no visor (corresponde ao botão C ou AC de uma calculadora). Definirá a propriedade .value do visor como uma texto vazio "".

3. porcentagem()

function porcentagem() {
        let d = document.getElementById("display");
        d.value = Number(d.value) / 100;
    }

Converte o número atual do visor para a sua forma percentual (divide por 100). Primeiro, ele captura o elemento do visor na variável d. Depois, converte o texto contido em d.value para um número usando Number(d.value). Por fim, divide esse valor por 100 e atualiza o visor.

4. raiz()

function raiz() {
        let d = document.getElementById("display");
        d.value = Math.sqrt(Number(d.value));
    }

Calcula a raiz quadrada do número que está no visor. Converte o texto do visor para um número (Number(d.value)). Aplica a função matemática Math.sqrt(), que calcula a raiz quadrada e por fim, substitui o valor do visor pelo resultado.

A função calcular() é responsável por avaliar e resolver a conta montada no visor da calculadora. A seguir, está o passo a passo de como ela funciona:

1. Captura da Expressão

let expressao = document.getElementById("display").value;

Captura o texto que está no visor (por exemplo: "2+3*4") e o armazena na variável expressao.

2. Bloco try { ... } catch { ... } (Tratamento de Erros)
Essa estrutura impede que o programa pare de funcionar caso o usuário digite uma conta inválida (como "5++2" ou "8*"). O try (Tentar): Executa o código principal. Se ocorrer algum erro durante a execução, o JavaScript pula imediatamente para o bloco catch. O catch (Capturar): Executa apenas se houver algum erro no try. Em vez de quebrar a aplicação, ele escreve "Erro" no visor.

3. A Função eval()

let resultado = eval(expressao);
    document.getElementById("display").value = resultado;

O eval() é uma função JavaScript que armazena uma string com código JavaScript (como "2+3*4") e a executa como um cálculo matemático real, retornando o valor final (14). Com isso, o valor final é guardado na variável resultado e exibido no visor.