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.


 Author : Suraj Singh Bisht
 Email :

      Simple Calculator App


<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");

<!-- 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;




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

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


<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 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 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 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 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>





Related Post

Top Visited

Big List Of Google Dorks For Sqli Injection

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

Create Simple Packet Sniffer Using Python

how to install burp suite in Linux/Ubuntu 16.04

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

How To Install GDB Peda?

Latest Google Dorks List

2 Easiest Way To Enable Monitor Mode in Kali Linux | Airmon-ng | Iwconfig

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