How I Built a Simple Calculator Using Only Variables and Data Types in JavaScript

When I first started learning JavaScript, all the concepts felt like an entirely new language and that’s because it actually is. So I decided to build something small but useful a simple calculator. What surprised me most was that I didn't need anything fancy just a good understanding of variables and data types was enough to make it work.

In this post, I’ll walk you through how I built it and how I used just variables and data types to power the whole thing. If you’re a beginner, this is for you.

What are Variables and Data Types?

Before we jump into code, let’s quickly talk about the two stars of the show:

Variables

A variable is like a storage box where we can keep information. In JavaScript, we create variables using let, const, or var. But the var is not widely used anymore, let is use instead of it while one can switch to using const instead of let where values don’t change.

let name = "Feyisara";

Now, the variable name holds the text "Feyisara".

Data Types

Data types describe the kind of information stored in a variable. JavaScript has several data types, but for this project, we only used numbers and strings.

Number → For mathematical values like 5, 20.7, or -10.
String → For text like "Hello" or "Result: ".

Building the Calculator Step-by-Step

Here’s the full code, then we’ll break it down:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Calculator</title>
</head>
<body>

  <h2>Simple Calculator</h2>

  <input type="number" id="num1" placeholder="Enter first number">
  <input type="number" id="num2" placeholder="Enter second number">
  <br><br>

  <button onclick="add()">Add</button>
  <button onclick="subtract()">Subtract</button>
  <button onclick="multiply()">Multiply</button>
  <button onclick="divide()">Divide</button>

  <h3 id="result">Result: </h3>

  <script>
    function add() {
      let num1 = Number(document.getElementById('num1').value);
      let num2 = Number(document.getElementById('num2').value);
      let sum = num1 + num2;
      document.getElementById('result').innerText = "Result: " + sum;
    }

    function subtract() {
      let num1 = Number(document.getElementById('num1').value);
      let num2 = Number(document.getElementById('num2').value);
      let difference = num1 - num2;
      document.getElementById('result').innerText = "Result: " + difference;
    }

    function multiply() {
      let num1 = Number(document.getElementById('num1').value);
      let num2 = Number(document.getElementById('num2').value);
      let product = num1 * num2;
      document.getElementById('result').innerText = "Result: " + product;
    }

    function divide() {
      let num1 = Number(document.getElementById('num1').value);
      let num2 = Number(document.getElementById('num2').value);
      let quotient = num1 / num2;
      document.getElementById('result').innerText = "Result: " + quotient;
    }
  </script>

</body>
</html>

Understanding the Code: Let’s Break It Down

Getting User Input

let num1 = Number(document.getElementById('num1').value);

document.getElementById('num1') → finds the input field with ID num1.
.value → gets the actual input (as a string).
Number(...) → converts that string to a number.

Repeat for num2.

➕ Doing the Math

let sum = num1 + num2;

This adds the two numbers and stores the result in the sum variable.

Same idea applies to:

difference = num1 - num2
product = num1 * num2
quotient = num1 / num2

Displaying the Result

document.getElementById('result').innerText = "Result: " + sum;

This updates the page with the final answer. It combines:

A string: "Result: "
A number: sum
JavaScript converts the number into a string and joins them.

What I Learned

This little project taught me that understanding just two things variables and data types is powerful enough to build something real.

I didn’t need any libraries or frameworks. Just a few lines of HTML and JavaScript.

If you're new to coding, I highly recommend starting small like this. Play around, change the values, and really get to know how variables and data types work.

Thanks for reading! 🎉
Have questions or want to share your own calculator? Drop it in the comments, I’d love to see what you build!

Built a Simple Calculator Using Only Variables and Data Types in JavaScript