Create a Calculator without any Buttons With Vanilla Javascript

Well, So The Idea was simple. To have a Calculator without any Buttons. Why you may ask? Because I Already Have a Keyboard with numbers and +, -, *, / etc with it, right? Like Dude, every smartphone, PC, or tab already has buttons, Why would I need that?

Besides that, the main target is to teach you in full detail how awesome Javascript is. Let’s get started, shall we?

So, I Think You already know HTML5, so let’s not dig into that. Give our Calculator a Title, something like

<h1> Calculator </h2>

Then I need an input box, where I can put simple math inputs like 2+2 to give the command

<label for=”expression”>Enter the Numbers</label> <input type=”text” id=”expression”> <br>

This is an HTML form that prompts the user to enter a mathematical expression, such as “2 + 4”. The label “Enter the Numbers” is associated with the input field for accessibility purposes. The input field has an id of “expression”, which will be used to access its value in JavaScript.

Now We need a button that we can click or touch to do the job, let’s create a button

<button onclick=”calculate()”>Calculate</button>

This is an HTML button that triggers the “calculate()” function when clicked.

And A Result box where The Calculated Result will be Displayed

<label for=”result”>Result:</label> <input type=”text” id=”result” disabled>

This is another HTML form that displays the result of the calculation. The label “Result:” is associated with the input field, which has an id of “result”. The “disabled” attribute prevents the user from typing into this input field.

Now The Fun JavaScript

<script>

function calculate() {

let expression = document.getElementById(“expression”).value;

let result = eval(expression);

document.getElementById(“result”).value = result; }

</script>

The JavaScript code defines a function called calculate() that is called when the Calculate button is clicked. The function retrieves the value of the input field using document.getElementById("expression").value, which is stored in the expression variable. The eval() function is used to evaluate the expression and store the result in the result variable. Finally, the result is displayed in the Result input field using document.getElementById("result").value = result;.

So Our Final Code for A Calculator Without Any Buttons

<h1>Calculator</h1>

<label for=”expression”>Enter the Numbers</label> <input type=”text” id=”expression”> <br> <button onclick=”calculate()”>Calculate</button> <br>

<label for=”result”>Result:</label> <input type=”text” id=”result” disabled>

<script> function calculate() {

let expression = document.getElementById(“expression”).value;

let result = eval(expression);

document.getElementById(“result”).value = result; }

</script>

You Can Just Google It Though!

But My Point is to Learn, Like When I Google Something like 2+2, Google Gives us a result. And We Don’t Need to build a calculator for daily usage. This is more of a How Does Google Do That?

My Plan is to Make Coding Fun, Learn bite-size Codes Before Diving into full-stack/mean-stack Development.

Signing Out

Shimul Shahriar