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

Create Simple Packet Sniffer Using Python

how to install burp suite in Linux/Ubuntu 16.04

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

How to create Phishing Page Using Kali Linux | Webpage Page Cloning Using Kali Linux Social Engineering Toolkit

Best 1000 User-agents List For Web Scraping

Big List Of Google Dorks For Sqli Injection

Latest Google Dorks List

How To Install GDB Peda?

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

How To Create Snake Game Using Python And Tkinter - Simple python games