<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
/* Created by aashutosh */
body {
    background:black;
    color:white;
    text-align:center;
}
button{
    padding:15px 27px;
    font: bolder;
    font-size:20px;
    color:white;
    background-color:#282828;
    border:none;
    display:inline-block;
    border-radius:20px;
    margin-top:12px;
    margin-left:5px;
    border:none;
}
button:focus,
input[type=text]:focus{
    outline:none;
}
.operators{
    background-color:#404040;
}
.equal{
    background-color:#FF8C00;
    padding:15px 140px;
    margin-left:5px;
}
input[type=text]{
    background-color:black;
    color:white;
    border:none;
    margin-top:5px;
    margin-bottom:5px;
    margin-right:2px;
    height:50px;
    text-align:right;
}
fieldset{
    border-radius:15px;
    border-color:white;
    border-width:2px;
    border:fixed;
}

</style>
</head>
<body>

<fieldset>
<legend>🔸CALCULATOR🔸</legend>
<input type="text" id="textbox1"
placeholder="enter number" size="30"  
readonly="true">
<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>
<button id="buttonP" class="operators">
+
</button>
<button id="button4">4</button>
<button id="button5">5</button>
<button id="button6">6</button>
<button id="buttonS" class="operators">
‒
</button>
<button id="button7">7</button>
<button id="button8">8</button>
<button id="button9">9</button>
<button id="buttonM" class="operators">
×
</button>
<button id="buttond">
<font color="darkorange">
·&nbsp
</font>
</button>
<button id="button0">0</button>
<button id="buttonC">
<font color="darkorange">c</font>
</button>
<button id="buttonD" class="operators">
÷
</button>
<button id="buttonE" class="equal">
=
</button>
</fieldset>
<br/><br />
<script>
// Created by aashutosh
window.onload=function()
{
var
eql=document.getElementById("buttonE"),
one=document.getElementById("button1"),
two=document.getElementById("button2"),
three=document
.getElementById("button3"),
four=document
.getElementById("button4"),
five=document
.getElementById("button5"),
six=document.getElementById("button6"),
seven=document
.getElementById("button7"),
eight=document
.getElementById("button8"),
nine=document
.getElementById("button9"),
zero=document
.getElementById("button0"),
plus=document
.getElementById("buttonP"),
sub=document.getElementById("buttonS"),
mul=document.getElementById("buttonM"),
div=document.getElementById("buttonD"),
dec=document.getElementById("buttond"),
clr=document.getElementById("buttonC"),
txtbox=document
.getElementById("textbox1");
var val1=0,val2=0,val3=0.0,optr="";
plus.onclick=function()
{
val1=Number(txtbox.value)
optr="+"
txtbox.value=""
}
sub.onclick=function()
{
val1=Number(txtbox.value)
optr="-"
txtbox.value=""
}
mul.onclick=function()
{
val1=Number(txtbox.value)
optr="*"
txtbox.value=""
}
div.onclick=function()
{
val1=Number(txtbox.value)
optr="/"
txtbox.value=""
}
clr.onclick=function()
{
val1=val2=0
optr=""
txtbox.value=""
}
dec.onclick=function()
{
txtbox.value+="."
}
zero.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="0"
}
one.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="1"
else
txtbox.value="1"
}
two.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="2"
else
txtbox.value="2"
}
three.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="3"
else
txtbox.value="3"
}
four.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="4"
else
txtbox.value="4"
}
five.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="5"
else
txtbox.value="5"
}
six.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="6"
else
txtbox.value="6"
}
seven.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="7"
else
txtbox.value="7"
}
eight.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="8"
else
txtbox.value="8"
}
nine.onclick=function()
{
if(txtbox.value!="0")
txtbox.value+="9"
else
txtbox.value="9"
}
eql.onclick=function()
{
val2=Number(txtbox.value)
switch(optr)
{
case "+":
val3=val1+val2
txtbox.value=val3
break
case "-":
val3=val1-val2
txtbox.value=val3
break
case "*":
val3=val1*val2
txtbox.value=val3
break
case "/":
if(val2==0)
{
alert("⚠️ Error: Divide by zero!")
txtbox.value="ERROR!"
}
else
{
val3=val1/val2;
txtbox.value=val3
}
break
}
optr=""
val1=val2=0
}
}
</script>
</body>

</html>