Create Calculator Using HTML + JAVASCRIPT + CSS

Posted by Suraj Singh on December 19, 2018 · 9 mins read

Simple Calculator App Using HTML + Javascript + CSS. 

 readers, Today I am going to share a very simple HTML script Where I Created A Simple Calculator App Just for Fun. Actually, I Wrote This App For One Of my noob readers, Who Trying To Learn New Things. I hope, you will enjoy it.



<html>


<!--
Author : Suraj Singh Bisht
Email : surajsinghbisht054@gmail.com

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Simple Calculator App
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

-->


<head>
<title>Calculator App - Suraj Singh</title>


<script type="text/javascript" >

// Number Clear One Digit Function
function RemoveOne () {
// Get display Object
var dp = document.getElementById('displaycontainer');
var g = dp.textContent;
dp.textContent = g.substr(0, g.length-1);
}


// All Clear Function
function RemoveAll(){
// Get display Object
var dp = document.getElementById('displaycontainer');
dp.textContent = "";

}

// Number Appending FUnction
function append(num) {

// Get Display Object
var dp = document.getElementById("displaycontainer");
var prev = dp.textContent;

// append
dp.textContent = prev + num;
}

// evaluion
function calculate() {
// Get Display Object
var dp = document.getElementById('displaycontainer');
var exp = dp.textContent;


if (exp) {

exp = eval(exp);
dp.textContent = exp;

}else {
alert("You need To Insert Number To Calcualte. !Ok");
}

}
</script>

<!-- Styles -->
<style type="text/css">
#button {
width: 50px;
display: table-cell;
border: solid;
border-color: cornflowerblue;
border-radius: 10px;
border-width: 2px;
text-align: center;
text-decoration: blink;
padding: 25px;
width: 50px;
height: 50px;
margin: auto;

}
#displaycontainer {
width: 400px;
padding: 10px;
height: 70px;
text-align: right;
font-weight: bolder;
font-size: xx-large;
font-stretch: ultra-expanded;
padding: 10px;
border-style: solid;
border-width: thin;
border-radius: 5px;


};

</style>
</head>

<body>

<!-- main container Wrapper -->
<div id="calculator_container" >

<!-- Display -->
<div id="displaycontainer">

</div>

<div id="button_container" style="margin: auto;">

<div id="row">
<div id="button" onclick="RemoveOne();">C</div>
<div id="button" onclick="RemoveAll();">CE</div>
<div id="button">Auto</div>
<div id="button"onclick="append('*');" >X</div>
</div>

<div id="row">
<div id="button" onclick="append(1);">1</div>
<div id="button" onclick="append(2);">2</div>
<div id="button" onclick="append(3);">3</div>
<div id="button" onclick="append('+');">+</div>
</div>
<div id="row">
<div id="button" onclick="append(4);">4</div>
<div id="button" onclick="append(5);">5</div>
<div id="button" onclick="append(6);">6</div>
<div id="button" onclick="append('-');">-</div>
</div>
<div id="row">
<div id="button" onclick="append(7);">7</div>
<div id="button" onclick="append(8);">8</div>
<div id="button" onclick="append(9);">9</div>
<div id="button" onclick="append('/');">/</div>
</div>
<div id="row">
<div id="button" onclick="append(0);">0</div>
<div id="button" onclick="append('.');">.</div>
<div id="button" onclick="calculate();" style="width:150px;">Enter</div>

</div>

</div>

</div>

</body>
</html>