Implementing a Simple Calculator using javascript, Html and CSS

Here is an implementation of simple calculator using html , css and javascript. We use an onclick method of form to display data in the calculator screen using javascript function.

Amulya Raj Budhathoki Amulya Raj Budhathoki
Oct 10, 2020 - 13:26
0 667
Implementing a Simple Calculator using javascript, Html and CSS

Here is an implementation of simple calculator using html , css and javascript. We use an onclick method of form to display data in the calculator screen using javascript function.

code from “index.html” file 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
</head>
<body>

    <h1>Calculator</h1>

    <form id="calid" Name ="cal" action="" >
        <input id="display"name="display" > <br/>
        <input type="button" id ="btn" onclick="cal.display.value+='7'" value="7" >
        <input type="button"  id = "btn1" onclick="cal.display.value+='8'" value="8">
        <input type="button"  id = "btn1" onclick="cal.display.value+='9'" value="9" >
        <input type="button"  id = "btn1" onclick="cal.display.value+='+'" value="+" ><br/>
        <input type="button"  id ="btn" onclick="cal.display.value+='4'" value="4" >
        <input type="button"  id = "btn1" onclick="cal.display.value+='5'" value="5" >
        <input type="button" id = "btn1" onclick="cal.display.value+='6'" value="6" >
        <input type="button" id = "btn1" onclick="cal.display.value+='-'" value="-" ><br/>
        <input type="button"  id ="btn" onclick="cal.display.value+='1'" value="7">
        <input type="button"  id = "btn1"onclick="cal.display.value+='2'" value="8" >
        <input type="button" id = "btn1" onclick="cal.display.value+='3'" value="9" >
        <input type="button" id = "btn1" onclick="cal.display.value+='*'" value="X" > <br/>
        <input type="button" id ="btn" onclick="cal.display.value=''" value="C">
        <input type="button" id = "btn1" onclick="cal.display.value+='0'" value="0" >
        <input type="button"  id = "btn1"onclick="cal.display.value=eval(cal.display.value)" value="=" >
        <input type="button"  id = "btn1"onclick="cal.display.value+='/'" value="&#247; " >
       


    </form>
    
</body>
</html>

code from “style.css”

h1{
    margin-left: 50px;
}

#calid{
    background-color: rgb(32, 194, 194);
    width: 600px; 
    height: 700px;
    margin-left: 50px;
}
#btn{
    width: 100px;
    height: 100px;
    margin-left: 50px;
    margin-right: 25px;
    font-size: 50pt;
    background-color: rgb(255, 255, 255);
    font-weight: 500;
    color: rgb(0, 0, 0);
    margin-top: 20px;

}
#btn1{
    width: 100px;
    height: 100px; 
    margin-right: 25px;
    font-size: 50pt;
    background-color: rgb(255, 255, 255);
    font-weight: 500;
    color: rgb(0, 0, 0);
}
#display{
    width: 500px;
    height: 100px; 
    text-align: right;
    background-color: rgb(15, 110, 122);
    margin: 45px; 
    font-size: 30pt;
    color: rgb(255, 255, 255)

}