Create a Simple and Stylish Calculator Using HTML, CSS and JavaScript

Introduction:

Here i will explain Create a Simple and Stylish Calculator Using HTML, CSS and JavaScript.

Description:

In this article, we will create a calculator step-by-step. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript.

HTML:

CSS:

body
{
background-color:tan;
}
.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
}
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
}
.keys {
position:relative;
top:15px;
}
.button {
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray {
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink {
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black {
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange {
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active {
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active {
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active {
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active {
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p {
line-height:10px;
}

SCRIPT:

function c(val)
{
 document.getElementById("d").value=val;
}
    function v(val)
{document.getElementById("d").value+=val;
}
function e() 
{ 
    try 
    { 
        c(eval(document.getElementById("d").value)) 
    } 
    catch(e) 
    {
        c('Error') } 
}