Post

How To Create A Calculator With Javascript, Html And Css

Javascript which is better known as the “scripting language” used to make webpages interactive, can do wonders. In this blog post, I will gladly walk you through step by step how to program a calculator with HTML, CSS, and Javascript, as we know, will perform our basic operations viz. Addition, Subtraction, Multiplication, and division. This tutorial is divided into three sections HTML, CSS, and Javascript respectively. Without any waste of time let's dive right into it.

SECTION ONE (HTML):

Open your text editor, create a file e.g calculator.html and paste the following snippet. 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<div class="title">HTML, CSS and JavaScript Calculator</div>
<table border="1">
<tr>
<!-- clear() function will call clear to clear all value -->
<td><input type="button" value="c" onclick="clear_cal()"/> </td>
<td colspan="3"><input type="text" id="edu"/></td>

</tr>
<tr>
<!-- creating buttons and assigning values-->
<td><input type="button" value="+" onclick="display('+')"/> </td>
<td><input type="button" value="1" onclick="display('1')"/> </td>
<td><input type="button" value="2" onclick="display('2')"/> </td>
<td><input type="button" value="3" onclick="display('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="display('-')"/> </td>
<td><input type="button" value="4" onclick="display('4')"/> </td>
<td><input type="button" value="5" onclick="display('5')"/> </td>
<td><input type="button" value="6" onclick="display('6')"/> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="display('*')"/> </td>
<td><input type="button" value="7" onclick="display('7')"/> </td>
<td><input type="button" value="8" onclick="display('8')"/> </td>
<td><input type="button" value="9" onclick="display('9')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="display('/')"/> </td>
<td><input type="button" value="." onclick="display('.')"/> </td>
<td><input type="button" value="0" onclick="display('0')"/> </td>
<!-- Evaluating function call eval()-->
<td><input type="button" value="=" onclick="solve()"/> </td>
</tr>
</table>


</body>
</html>

SECTION TWO (CSS):

Copy the below CSS snippet and paste in between the <head></head> element of the calculator.html or create a separate file name it whatever you want e.g. calculator.css but make sure to reference it in the calculator.html.  

.title{
border-radius: 2px;
margin-bottom: 10px;
text-align:center;
width: 210px;
color:#ff4456;
border: solid black 1px;
}
input[type="button"]
{
border-radius: 1px;
background-color: #f2f2f2;  
color: black;
border-color:#ff4456 ;
width:100%;
}
input[type="text"]
{
border-radius: 1px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}

SECTION THREE (JAVASCRIPT):

Copy the below Javascript snippet and paste just before the closing body element </body>  of the calculator.html or create a separate file name it whatever you want e.g calculator.js but make sure to reference it in the calculator.html.

//function for displaying values
function display(val){
document.getElementById("edu").value+=val
 }

//function for evaluation
function solve(){
let x = document.getElementById("edu").value
let y = eval(x)
document.getElementById("edu").value = y
}

//function for clearing the display
function clear_cal(){
document.getElementById("edu").value = ""
}

This all you need to have your calculator working. Them complete snippet Bellow

Complete Snippet

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
.title{
border-radius: 2px;
margin-bottom: 10px;
text-align:center;
width: 210px;
color:#ff4456;
border: solid black 1px;
}
input[type="button"]
{
border-radius: 1px;
background-color: #f2f2f2;  
color: black;
border-color:#ff4456 ;
width:100%;
}
input[type="text"]
{
border-radius: 1px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}
</style>
</head>
<body>

<div class ="title" >HTML, CSS and JavaScript Calculator</div>
<table border="1">
<tr>
<!-- clear() function will call clear to clear all value -->
<td><input type="button" value="c" onclick="clear_cal()"/> </td>
<td colspan="3"><input type="text" id="edu"/></td>

</tr>
<tr>
<!-- creating buttons and assigning values-->
<td><input type="button" value="+" onclick="display('+')"/> </td>
<td><input type="button" value="1" onclick="display('1')"/> </td>
<td><input type="button" value="2" onclick="display('2')"/> </td>
<td><input type="button" value="3" onclick="display('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="display('-')"/> </td>
<td><input type="button" value="4" onclick="display('4')"/> </td>
<td><input type="button" value="5" onclick="display('5')"/> </td>
<td><input type="button" value="6" onclick="display('6')"/> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="display('*')"/> </td>
<td><input type="button" value="7" onclick="display('7')"/> </td>
<td><input type="button" value="8" onclick="display('8')"/> </td>
<td><input type="button" value="9" onclick="display('9')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="display('/')"/> </td>
<td><input type="button" value="." onclick="display('.')"/> </td>
<td><input type="button" value="0" onclick="display('0')"/> </td>
<!-- Evaluating function call eval()-->
<td><input type="button" value="=" onclick="solve()"/> </td>
</tr>
</table>


<script>
//function for displaying values
function display(val){
document.getElementById("edu").value+=val
 }

//function for evaluation
function solve(){
let x = document.getElementById("edu").value
let y = eval(x)
document.getElementById("edu").value = y
}

//function for clearing the display
function clear_cal(){
document.getElementById("edu").value = ""
}
</script>
</body>
</html>

Hope this help, let me know in the comments below if you have any difficulty. 

Did this help you?

  
Not clear with something? drop a Comment
author

  • related posts

    0 comments

    leave a reply