Interactive Calculator

From Basic to Advanced: Complete DOM Manipulation Course

Sobre a Aula

Interactive Calculator

In this second project, we will create an interactive calculator that will allow you to perform basic operations of addition, subtraction, multiplication and division. We will develop HTML, CSS, and JavaScript and add comments to explain each part of the code.

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>Simple Calculator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <button onclick="clearDisplay()">C</button>
    <button onclick="concatenateNumber('7')">7</button>
    <button onclick="concatenateNumber('8')">8</button>
    <button onclick="concatenateNumber('9')">9</button>
    <button onclick="performOperation('/')">/</button>
    <button onclick="concatenateNumber('4')">4</button>
    <button onclick="concatenateNumber('5')">5</button>
    <button onclick="concatenateNumber('6')">6</button>
    <button onclick="performOperation('*')">*</button>
    <button onclick="concatenateNumber('1')">1</button>
    <button onclick="concatenateNumber('2')">2</button>
    <button onclick="concatenateNumber('3')">3</button>
    <button onclick="performOperation('-')">-</button>
    <button onclick="concatenateNumber('0')">0</button>
    <button onclick="performOperation('.')">.</button>
    <button onclick="calculateResult()">=</button>
    <button onclick="performOperation('+')">+</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 displayValue = '';
let currentOperation = '';
let previousValue = '';

// Function to concatenate numbers on the display
function concatenateNumber(number) {
  displayValue += number;
  updateDisplay();
}

// Function to perform operations (+, -, *, /)
function performOperation(operation) {
  if (currentOperation === '' || displayValue === '') {
    previousValue = displayValue;
  } else {
    calculateResult();
  }

  currentOperation = operation;
  displayValue = '';
}

// Function to calculate and display the result
function calculateResult() {
  let result;

  switch (currentOperation) {
    case '+':
      result = parseFloat(previousValue) + parseFloat(displayValue);
      break;
    case '-':
      result = parseFloat(previousValue) - parseFloat(displayValue);
      break;
    case '*':
      result = parseFloat(previousValue) * parseFloat(displayValue);
      break;
    case '/':
      result = parseFloat(previousValue) / parseFloat(displayValue);
      break;
    default:
      return;
  }

  displayValue = result.toString();
  currentOperation = '';
  updateDisplay();
}

// Function to clear the display
function clearDisplay() {
  displayValue = '';
  currentOperation = '';
  previousValue = '';
  updateDisplay();
}

// Function to update the display content
function updateDisplay() {
  document.getElementById('display').value = displayValue;
}

This interactive calculator project uses the concepts learned, such as event manipulation, dynamic DOM updating and programming logic. Feel free to try and expand this project!

Siga-me

Entrar na conversa