Skip to main content

Create Calculator Using HTML + JAVASCRIPT + CSS


Simple Calculator App Using HTML + Javascript + CSS. 

 Friends, 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 Friend, 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>

Related Post

Top Visited

Big List Of Google Dorks For Sqli Injection

how to install burp suite in Linux/Ubuntu 16.04

Create Ping Sweeping Script Using Python

Python Beautiful Soup Module - Tutorial - Part 2

Create Simple Packet Sniffer Using Python

Latest Google Dorks List

how to configure burpsuite with firefox?

List of Keyboard Shortcuts Keys for GNOME Desktop (Kali linux / Linux / Ubuntu/*nix )

What is Burp Suite And its Features?

What is the use of Pseudo header in TCP/UDP packets?