Marco Azimonti Personal Homepage

Calculator

Building a calculator is an excellent project to practice fundamental web development skills in HTML, CSS, and JavaScript. In this tutorial, I’ll explain how I created a basic, responsive calculator app that performs basic arithmetic operations.

A live version of the app is available here.

HTML structure

The HTML is where we define the basic layout of the calculator, which includes a display area and buttons for each digit and operation. Here’s an overview:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="app-version" content="1.0.0">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MA Calculator</title>
  <link rel="stylesheet" href="calculator.css">
</head>
<body>
  <div class="calculator">
    <div class="display">
      <div class="current-operation" id="current-operation"></div>
      <div class="result" id="display">0</div>
    </div>
    <div class="buttons">
      <div class="button gray" onclick="clearDisplay()">AC</div>
      <!-- Other buttons go here -->
    </div>
  </div>
  <script src="calculator.js"></script>
</body>
</html>

In this code: - Display shows the ongoing calculation and result. - Buttons include digits, operations, and special functions like clearing the display.

Styling with CSS

The CSS provides styling and layout for the calculator. I used Flexbox and Grid to create a responsive design that adjusts for different screen sizes.


body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #333;
}

.calculator {
  max-width: 500px;
  background-color: #000;
  padding: 20px;
  border-radius: 10px;
}

.display {
  color: white;
  background-color: black;
  padding: 10px;
  border-radius: 10px;
}

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

Key points: - The .calculator class centers the calculator and restricts its maximum width. - .buttons uses Grid for a clean layout, arranging the buttons in a 4x5 grid.

JavaScript for interactivity

JavaScript adds the interactivity, handling user input and performing calculations. Here’s a look at some of the core functions:


let currentOperation = '';
let previousValue = '';
let operation = undefined;

function input(number) {
  currentOperation += number;
  updateDisplay();
}

function operate(op) {
  if (currentOperation === '') return;
  previousValue = currentOperation;
  operation = op;
  currentOperation = '';
}

function calculate() {
  let result;
  const prev = parseFloat(previousValue);
  const current = parseFloat(currentOperation);

  if (isNaN(prev) || isNaN(current)) return;

  switch (operation) {
    case '+':
      result = prev + current;
      break;
    // Additional cases here
  }

  currentOperation = result;
  operation = undefined;
  previousValue = '';
  updateDisplay();
}

Explanation: - input() handles adding digits to the display. - operate() sets the current operation. - calculate() performs the calculation and updates the display.

Conclusion

Building a calculator like this provides practice with core web technologies. Each part—HTML, CSS, JavaScript—plays a crucial role in the app’s functionality and design.

The final results on iOS is shown below: