A Beginner's Guide to Developing a Prefix Calculator: Step-by-Step Tutorial

In this blog post, we will explore how to create a prefix calculator using Html & JavaScript. So that you can easily integrate this in your web project.

Photo by Iryna Tysiak on Unsplash

What is a Prefix notation?

Prefix notation is a mathematical notation where operators are placed before their operands. For example, the prefix notation for the expression "2 + 3" would be "+ 2 3". This type of notation is commonly used in computer science and programming, and it is a useful skill to have if you are interested in becoming a developer.

Building the Calculator

Creating the HTML Form:

The first step is to create an HTML form that allows users to input the prefix expression and see the result. Here is the code for the form:

<form>
  <div class="form-group my-4">
    <label for=""
      >prefix expression(<label class="text-danger">
        *Only numbers</label
      >
      )</label
    >
    <input
      type="text"
      class="form-control"
      placeholder="Enter expression"
      id="prefix"
      required
    />
  </div>
  <div class="form-group">
    <label for="">Ans</label>
    <input
      type="number"
      class="form-control"
      placeholder="Ans is.."
      id="Ans"
      disabled
    />
  </div>

  <button
    type="submit"
    class="btn btn-outline-secondary mb-3 text-light cal"
  >
    Calculate
  </button>
</form>
 

We've used Bootstrap classes to style the form. This form includes two input fields: one for the prefix expression and one for the result. The result field is disabled, which means that users cannot type in it directly. Instead, we will use JavaScript to update the value of this field based on the user input.

Writing the JavaScript Code:

Now that we have created the HTML form, it's time to write the JavaScript code to evaluate the prefix expression and calculate the result. You can write this JavaScript in script tag within same html file or can create different js file & link that js in html file. Here is the full code:

$(".cal").click(function (e) {

  e.preventDefault();
  let prefixExp = document.getElementById("prefix").value;
  let stack = [];

  //function to check whether character is number or not
  function is_numeric(str) {
    return /^\d+$/.test(str);
  }

  if (prefixExp) {
    prefixExp = prefixExp.trim();
    for (idx = prefixExp.length - 1; idx >= 0; idx--) {
      if (is_numeric(parseInt(prefixExp[idx]))) {
        stack.push(prefixExp[idx]);
      } else if (prefixExp[idx] === " ") {
        continue;
      } else {
        let tempAns = eval(stack.pop() + prefixExp[idx] + stack.pop());
        stack.push(tempAns);
      }
    }
  }
  document.getElementById('Ans').value = stack.pop();
});

 And here it's step by step explanation with code snippets:

1. First, we're targeting the button with class .cal and adding a click event listener to it using jQuery's .click() function.And have added e.preventDefault() function to prevent page reload:

  $(".cal").click(function (e) {
      e.preventDefault();
});

2. We're getting the value of the prefix expression entered by the user in the input field with id prefix and storing it in a variable `prefixExp` & declaring  `stack `array variable :

let prefixExp = document.getElementById("prefix").value;
let stack = [];

3. We're defining a function called `is_numeric()` that takes a string as input and checks if it contains only digits using a regular expression :

function is_numeric(str) {
  return /^\d+$/.test(str);
}

4. We're checking if the `prefixExp` variable has a value and then trimming it to remove any leading or trailing spaces :

if (prefixExp) {
  prefixExp = prefixExp.trim();
}

5. We're looping through the `prefixExp` variable from the end to the beginning using a for loop. And Inside it, we're checking if the current character is a digit using the `is_numeric()` function. If it is, we're pushing it onto the stack array :

for (idx = prefixExp.length - 1; idx >= 0; idx--) {
  if (is_numeric(parseInt(prefixExp[idx]))) {
  stack.push(prefixExp[idx]);
  }
}

6. If the current character is a space, we're skipping it and continuing with the next character or else the current character is an operator, we're popping two operands from the `stack` array, applying the operator to them using the `eval()` function, and pushing the result back onto the stack array :

else if (prefixExp[idx] === " ") {
  continue;
}
else {
  let tempAns = eval(stack.pop() + prefixExp[idx] + stack.pop());
  stack.push(tempAns);
}

7. Finally, we're setting the value of the Ans input field to the result of the calculation, which is the only element left in the stack array.

  else {
  let tempAns = eval(stack.pop() + prefixExp[idx] + stack.pop());
  stack.push(tempAns);
}

Here's how the calculator looks after some CSS modifications and using built-in Bootstrap classes. You can see a screenshot of the updated design below and test it using this link.

CalConT

You can checkout how I developed this calculator in calcont's github repo & contribute to it as well.

Hope you got the idea for developing Prefix calculator using html & javascript, Thanx !!