Calculadora Interativa

Do Básico ao Avançado: Curso Completo de Manipulação de DOM

Sobre a Aula

Calculadora Interativa

Neste segundo projeto, iremos criar uma calculadora interativa que permitirá realizar operações básicas de adição, subtração, multiplicação e divisão. Vamos desenvolver o HTML, CSS e JavaScript e adicionar comentários para explicar cada parte do código.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculadora Simples</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <button onclick="limparDisplay()">C</button>
    <button onclick="concatenarNumero('7')">7</button>
    <button onclick="concatenarNumero('8')">8</button>
    <button onclick="concatenarNumero('9')">9</button>
    <button onclick="realizarOperacao('/')">/</button>
    <button onclick="concatenarNumero('4')">4</button>
    <button onclick="concatenarNumero('5')">5</button>
    <button onclick="concatenarNumero('6')">6</button>
    <button onclick="realizarOperacao('*')">*</button>
    <button onclick="concatenarNumero('1')">1</button>
    <button onclick="concatenarNumero('2')">2</button>
    <button onclick="concatenarNumero('3')">3</button>
    <button onclick="realizarOperacao('-')">-</button>
    <button onclick="concatenarNumero('0')">0</button>
    <button onclick="realizarOperacao('.')">.</button>
    <button onclick="calcularResultado()">=</button>
    <button onclick="realizarOperacao('+')">+</button>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.calculator {
  max-width: 300px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
  width: 92%;
  padding: 10px;
  margin-bottom: 10px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;

  background-color: #332d2d;
  color: #f2f2f2;
}

JavaScript (script.js):

let displayValor = '';
let operacaoAtual = '';
let valorAnterior = '';

// Função para concatenar números no display
function concatenarNumero(numero) {
  displayValor += numero;
  atualizarDisplay();
}

// Função para realizar operações (+, -, *, /)
function realizarOperacao(operacao) {
  if (operacaoAtual === '' || displayValor === '') {
    valorAnterior = displayValor;
  } else {
    calcularResultado();
  }

  operacaoAtual = operacao;
  displayValor = '';
}

// Função para calcular e exibir o resultado
function calcularResultado() {
  let resultado;

  switch (operacaoAtual) {
    case '+':
      resultado = parseFloat(valorAnterior) + parseFloat(displayValor);
      break;
    case '-':
      resultado = parseFloat(valorAnterior) - parseFloat(displayValor);
      break;
    case '*':
      resultado = parseFloat(valorAnterior) * parseFloat(displayValor);
      break;
    case '/':
      resultado = parseFloat(valorAnterior) / parseFloat(displayValor);
      break;
    default:
      return;
  }

  displayValor = resultado.toString();
  operacaoAtual = '';
  atualizarDisplay();
}

// Função para limpar o display
function limparDisplay() {
  displayValor = '';
  operacaoAtual = '';
  valorAnterior = '';
  atualizarDisplay();
}

// Função para atualizar o conteúdo do display
function atualizarDisplay() {
  document.getElementById('display').value = displayValor;
}

Este projeto de calculadora interativa utiliza os conceitos aprendidos, como manipulação de eventos, atualização dinâmica do DOM e lógica de programação. Sinta-se à vontade para experimentar e expandir este projeto!

Siga-me

Entrar na conversa