Latest Posts
InfoTechSite
InfoTechSite
Web Designing Tutorials

How to Create a Simple Calculator Using HTML and JavaScript

Pinterest LinkedIn Tumblr
Create a Simple Calculator Using HTML
Building a simple calculator using HTML and JavaScript may be a fun and educational job for web developers who are just starting out. By combining the capabilities of HTML for user interface design and JavaScript for calculation handling, you can construct an interactive and functioning calculator right in your browser. In this post, we will lead you through the step-by-step process of creating a basic calculator from scratch, while also exploring the principles of web programming along the way.

To begin, we must first create the project environment. We’ll build the basic HTML framework that will serve as the foundation for our calculator. In addition, to make the calculator more visually appealing, we’ll set up its look using CSS. Finally, we will configure the JavaScript environment in order to add functionality to our calculator.

Steps to create a Simple calculator Using HTML and JavaScript

Here are the steps for making a simple calculator using HTML and JavaScript that can perform simple arithmetic on integer integers. Text and button inputs are used on a table within a form element, and the OnClick event was used to place button values on the screen or to assess the numbers.

1. Designing The User Interface

The user interface (UI) is the calculator’s front face. We’ll create a clean display for displaying input and results. We’ll also provide interactive buttons for integers and operators. Our goal is to produce an intuitive and user-friendly design that enriches every aspect of calculator users.

Use the following steps in order to design the user interface of the calculator.

#Step 1. Initially, create the <html> tag along with the <form> element and the <body> tag as given below.

<html>
<head><title>A Simple Calculator Using HTML</title></head>
<body>
<h3>A Simple Calculator Using HTML</h3>
<form Name="calc"> </form>
</body>
</html>

#Step 2. Now, Create a table within <form>……</form> tag using <table> …..</table> tag and insert two types of Input text and buttons within the table data of table row using <tr><td>….</td></tr> tag.

<table id="calc" border=2>
<tr>
<td colspan=5><input id="btn" name="display" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
</table>

#Step 3. Then, Create buttons using <input> tag and also set the “id” and “value” of these buttons within the table row having <tr><td>….</td></tr> tags as presented below.

<tr>
<td><input id="btn" type=button value="MC"></td>
<td><input id="btn" type=button value="0"></td>
<td><input id="btn" type=button value="1"></td>
<td><input id="btn" type=button value="2"></td>
<td><input id="btn" type=button value="+"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS"></td>
<td><input id="btn" type=button value="3"></td>
<td><input id="btn" type=button value="4"></td>
<td><input id="btn" type=button value="5"></td>
<td><input id="btn" type=button value="-"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR"></td>
<td><input id="btn" type=button value="6"></td>
<td><input id="btn" type=button value="7"></td>
<td><input id="btn" type=button value="8"></td>
<td><input id="btn" type=button value="x"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+"></td>
<td><input id="btn" type=button value="9"></td>
<td><input id="btn" type=button value="±"></td>
<td><input id="btn" type=button value="="></td>
<td><input id="btn" type=button value="/"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x"></td>
<td><input id="btn" type=button value="."></td>
<td><input id="btn" type=button value="x2"></td>
<td><input id="btn" type=button value="√"></td>
<td><input id="btn" type=button value="C"></td>
</tr>

#Step 4. Finally, add the following CSS code to give the design for the calculator with <style>…..</style> tag as given below.

<style>
#calc{width:300px;height:250px;}
#btn{width:100%;height:40px;font-size:20px;}
</style>

The final view of the calculator after completing the user interface will look like this.

simple calculator design | How to Create a Simple Calculator Using HTML and JavaScript

2. Handling the User Input

Use the following steps in order to design the user interface of the calculator.

#Step1. Assign an “onkeypress” event for a display button that has been created for displaying the input and result of the calculation as given below.

<tr>
<td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>

#Step 2. Assign an OnClick event for all the buttons having numbers and arithmetic operators as given below.

<tr>
<td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td>
<td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td>
<td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td>
<td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>

3. Performing the Calculation

Assign an OnClick event for all the arithmetic operators, provide double quote with space (“”) for the Clear(C) button, and use the eval() function to evaluate the numbers on the OnClick event as given below.

<tr>
<td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td>
<td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))">
</td>
<td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td>
<td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td>
<td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td>
<td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>

Full HTML code for a Simple HTML calculator

<html>
<head></head>
<body>
<h3>Simple Calculator</h3>
<br/>
<style>
#calc{width:300px;height:250px;}
#btn{width:100%;height:40px;font-size:20px;}
</style>
<form Name="calc">
<table id="calc" border=2>
<tr>
<td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td>
<td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td>
<td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td>
<td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td>
<td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))">
</td>
<td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td>
<td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td>
<td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td>
<td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
</table>
</form>
</body>
</html>

Preview of Simple HTML calculator

Conclusion

Making a simple calculator using HTML and JavaScript is a great approach to learning the fundamentals of web programming. We’ve gone through the essential steps in this post, from designing the user interface to handling the user input and performing the computation logic. By experimenting with and developing this project, you can improve your web programming abilities and obtain a better understanding of interactive web apps. Remember that the more you practice and investigate, the more proficient you will become in web programming.

Read Next: How to Create a JavaScript Bookmarklet?

Pro Tip: Please visit https://assignmentcore.com/javascript-homework/ and hire coding experts to provide you with JavaScript assignment help of any complexity.

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Related Posts

3 Comments

  1. jebreel

    shuseel
    Please tell me how to design two inputs type=text that the question appear in the first input
    and the result appear in the second one?

  2. Mark

    Very useful material added to his bookmarks. I tried many different services for creating online calculators, among which Contact Form 7 and uCalc plugin were the most popular. Pretty good tools for creating calculators.

  3. garbageoverflow

    Dear people,
    I made a caluclator app in HTML CSS and JS, it’s basically a .hta file.
    I made a github repo, if it helps. The app looks nice and has hover effects, if the design doesn’t fir you, you can
    also customize it with css.

    No problem if you don’t know how to customize it, we even have a guide in the README.md file, that helps
    you to customize the app.

    Visit the github repo here github.com/garbageoverflow/calculator