Javascript Calculator Tutorial

A calculator is a basic tool that everyone needs, and with JavaScript, we can create one easily. JavaScript is a versatile language that is commonly used for web development. We will be using HTML, CSS, and JavaScript to create our calculator.

Step 1: Setting Up the HTML

The first step is to create an HTML file and add the necessary elements to build our calculator. We need to create a container div to hold all the calculator elements. Inside the container, we will add two input fields for the operands and a select element to choose the operation. We will also add buttons for numbers, decimal point, clear, and calculate.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <input type="text" id="operand1" placeholder="Enter Operand 1">
      <select id="operation">
        <option value="add">+</option>
        <option value="subtract">-</option>
        <option value="multiply">*</option>
        <option value="divide">/</option>
      </select>
      <input type="text" id="operand2" placeholder="Enter Operand 2">
      <br>
      <button onclick="addNumber(1)">1</button>
      <button onclick="addNumber(2)">2</button>
      <button onclick="addNumber(3)">3</button>
      <button onclick="addOperation('.')">.</button>
      <br>
      <button onclick="addNumber(4)">4</button>
      <button onclick="addNumber(5)">5</button>
      <button onclick="addNumber(6)">6</button>
      <button onclick="clearInput()">C</button>
      <br>
      <button onclick="addNumber(7)">7</button>
      <button onclick="addNumber(8)">8</button>
      <button onclick="addNumber(9)">9</button>
      <button onclick="calculate()">=</button>
      <br>
      <button onclick="addOperation('+')">+</button>
      <button onclick="addOperation('-')">-</button>
      <button onclick="addOperation('*')">*</button>
      <button onclick="addOperation('/')">/</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Step 2: Styling the Calculator

The next step is to style the calculator using CSS. We will be using Flexbox to position the elements.

.container {
  width: 400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

button {
  width: 50px;
  height: 50px;
  font-size: 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  background-color: #c5e1a5;
}

button:hover {
  background-color: #8bc34a;
}

input {
  width: 150px;
  height: 50px;
  font-size: 20px;
  margin: 5px;
  border-radius: 5px;
  border: none;
  text-align: right;
}

select {
  width: 50px;
  height

Step 3: Javascript Code .

My apologies, I must have missed including the JavaScript code in the previous answer. Here is the JavaScript code that is used to make the calculator functional:

let operand1 = "";
let operand2 = "";
let operation = "";

function addNumber(num) {
  if (operation === "") {
    operand1 += num;
    document.getElementById("operand1").value = operand1;
  } else {
    operand2 += num;
    document.getElementById("operand2").value = operand2;
  }
}

function addOperation(op) {
  if (operand1 !== "" && operand2 !== "") {
    calculate();
  }
  operation = op;
}

function calculate() {
  let result = 0;
  switch (operation) {
    case "+":
      result = parseFloat(operand1) + parseFloat(operand2);
      break;
    case "-":
      result = parseFloat(operand1) - parseFloat(operand2);
      break;
    case "*":
      result = parseFloat(operand1) * parseFloat(operand2);
      break;
    case "/":
      result = parseFloat(operand1) / parseFloat(operand2);
      break;
    case ".":
      operand2 += ".";
      document.getElementById("operand2").value = operand2;
      return;
  }
  operand1 = result.toString();
  operand2 = "";
  operation = "";
  document.getElementById("operand1").value = operand1;
  document.getElementById("operand2").value = "";
}

function clearInput() {
  operand1 = "";
  operand2 = "";
  operation = "";
  document.getElementById("operand1").value = "";
  document.getElementById("operand2").value = "";
}

This JavaScript code includes functions that allow the calculator to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. The addNumber() function is used to add numbers to the input fields for operands 1 and 2. The addOperation() function is used to select the arithmetic operation to be performed. The calculate() function is used to perform the actual calculation and display the result. The clearInput() function is used to clear the input fields and reset the calculator.

Javascript Calculator Tutorial

Step 1: Setting Up the HTML

Step 2: Styling the Calculator

Step 3: Javascript Code .

Thanks for Reading .....