Build A Calculator Using Html And Css

MUAZHAN

6 min read

·

Jul 03, 2024

37

Share

Building a Simple Calculator Using HTML, CSS, and JavaScript

This article will guide you through building a basic calculator using HTML, CSS, and JavaScript. You'll learn how to structure the calculator's interface, handle user input, and perform calculations.

1. HTML Structure:

First, create an HTML file (e.g., calculator.html). Here's the basic HTML structure:

  
   


  

    

    

      +
      -
      *
      /
      7
      8
      9
      =
      4
      5
      6
      C
      1
      2
      3
      0
      .
    
  

  

Explanation:

• div.calculator: Contains the entire calculator layout.
• div.display: Shows the current input and results.
• div.buttons: Holds all the calculator buttons.
• button elements: Represent the calculator buttons (numbers, operators, clear, equals).
• onclick attributes: Call JavaScript functions when buttons are clicked.

2. CSS Styling:

Create a CSS file (e.g., style.css) to style the calculator:

.calculator {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f4f4f4;
}

.display {
  height: 40px;
  background-color: #fff;
  padding: 10px;
  font-size: 20px;
  text-align: right;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.buttons button {
  width: 50px;
  height: 40px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #eee;
  cursor: pointer;
  font-size: 18px;
}

.operator {
  background-color: #f0f0f0;
}

.clear {
  background-color: #fafafa;
}

Explanation:

• Styles the calculator container, the display area, and the buttons.
• Uses classes for styling specific button types (operators, clear).

3. JavaScript Logic:

Finally, create a JavaScript file (e.g., script.js) to handle the calculator's functionality:

let display = document.querySelector('.display');
let previousOperator = null;
let previousOperand = null;

function appendNumber(num) {
  display.textContent += num;
}

function appendOperator(operator) {
  if (previousOperator) {
    calculate();
  }
  previousOperator = operator;
  previousOperand = parseFloat(display.textContent);
  display.textContent += operator;
}

function calculate() {
  let currentOperand = parseFloat(display.textContent.split(previousOperator)[1]);
  let result;

  switch (previousOperator) {
    case '+':
      result = previousOperand + currentOperand;
      break;
    case '-':
      result = previousOperand - currentOperand;
      break;
    case '*':
      result = previousOperand * currentOperand;
      break;
    case '/':
      result = previousOperand / currentOperand;
      break;
  }

  display.textContent = result;
  previousOperator = null;
  previousOperand = null;
}

function clearDisplay() {
  display.textContent = '';
  previousOperator = null;
  previousOperand = null;
}

Explanation:

• appendNumber(num): Appends the clicked number to the display.
• appendOperator(operator): Appends the clicked operator to the display, stores the previous operand and operator.
• calculate(): Performs the calculation based on the stored operator and operands.
• clearDisplay(): Clears the display and resets variables.

Running the Calculator:

1. Save each file (HTML, CSS, JavaScript) in the same folder.
2. Open calculator.html in your web browser.

Now you have a basic calculator that can perform simple arithmetic operations! You can further enhance this by adding features like:

• History: Store previous calculations.
• Advanced Operations: Implement functions like square root, power, etc.
• Error Handling: Handle invalid input and divide-by-zero errors.

This example provides a starting point for building a more complex and functional calculator. Remember to experiment with different CSS styles to make your calculator visually appealing.