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

how to install burp suite in Linux/Ubuntu 16.04

Create Simple Packet Sniffer Using Python

Big List Of Google Dorks For Sqli Injection

Latest Google Dorks List

how to configure burpsuite with firefox?

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

Python Beautiful Soup Module - Tutorial - Part 2

Create Ping Sweeping Script Using Python

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

What is Burp Suite And its Features?