Building A Responsive HTML5 Calculator Application

Quantum
Quest
Algorithms, Math, and Physics

Building a responsive HTML5 calculator application

Creating a basic calculator app is an excellent way to sharpen my web development skills with HTML, CSS, and JavaScript. This project lets me practice setting up a structured interface, styling it for clarity and responsiveness, and adding interactivity. Here, I will take you through each step of building the app, focusing on clean code and an adaptable layout. My goal with this project was to create a functional, responsive calculator that offers a smooth experience across different screen sizes.

HTML structure

To begin, I built the HTML to define the calculator’s basic layout. HTML forms the skeleton of any web app, and in this case, it includes a display area for showing results and buttons for each digit and arithmetic operation. Here’s the structure:


<!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>
      <!-- Additional buttons go here -->
    </div>
  </div>
  <script src="calculator.js"></script>
</body>
</html>

This code provides a clean, organized layout for the calculator. The display area contains two main sections: one to show the current operation and another to display the result. Buttons are arranged in a grid layout for easy interaction.

CSS for styling

Next, I turned to CSS to style the calculator, making it both visually appealing and functional across screen sizes. I used Flexbox to center the calculator within the viewport and Grid to align buttons consistently.


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;
}

This CSS creates a dark-themed calculator with a compact, professional appearance. The .buttons class utilizes a grid with four columns, allowing the buttons to align in a 4x5 layout, which ensures consistent spacing and makes it intuitive to use.

JavaScript for interactivity

JavaScript enables the calculator to perform arithmetic operations and respond to user inputs. With JavaScript, I handle the logic for managing input, handling operations, and updating the display.


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();
}

In this code:

  • input() allows users to enter digits.
  • operate() sets up the operation (addition, subtraction, etc.) by storing the current input as a previous value.
  • calculate() completes the calculation based on the selected operation and updates the display.

Putting It All Together

With the HTML, CSS, and JavaScript in place, my calculator app performs basic arithmetic operations and adapts responsively to different screen sizes. The structured layout, clean styling, and interactive functions work together to deliver a streamlined user experience. Working on this project was a practical way to explore web development techniques and implement responsive design.

For more insights into this topic, you can find the details here

javascript css html5 pwa