Simple Calculator Using JavaScript, HTML and Bootstrap.
Calculator using JS and HTML.
{tocify} $title={Table of Contents}
Introduction.
Simple calculator using JavaScript, HTML and Bootstrap.
- Must have knowledge of JavaScript function, operator and DOM manipulation.
- Basic JavaScript event knowledge is required to create a simple calculator.
- Basic knowledge of Bootstrap grid.
- Basic knowledge of HTML5 from input tags and CSS3.
Preview:
download all code in .zip file:- Click hear
Download Version 2.0 :- Click hear
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PoorWebDev</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
body{
background-color:#ffffff;
}
</style>
</head>
<body>
<div class="">
<div class="row mx-auto ">
<div class="col-6 form-group bg-light rounded shadow mx-auto p-4 mt-4">
<label class="form-label" for="display">@PoorWebDev</label>
<input type="text" name="" id="display" class="mb-4 mt-3 form-control" disabled> <div class="row m-3">
<button class="btn btn col-4 py-4" id="btn7">7</button>
<button class="btn btn col-4 py-4" id="btn8">8</button>
<button class="btn btn col-4 py-4" id="btn9">9</button>
<button class="btn btn col-4 py-4" id="btn4">4</button>
<button class="btn btn col-4 py-4" id="btn5">5</button>
<button class="btn btn col-4 py-4" id="btn6">6</button>
<button class="btn btn col-4 py-4" id="btn1">1</button>
<button class="btn btn col-4 py-4" id="btn2">2</button>
<button class="btn btn col-4 py-4" id="btn3">3</button>
<button class="btn btn col-4 py-4" id="point">.</button>
<button class="btn btn col-4 py-4" id="btn0">0</button>
<button class="btn btn col-4 py-4" id="addition">+</button>
<button class="btn btn col-4 py-4" id="subtract">-</button>
<button class="btn btn col-4 py-4" id="multiplication">*</button>
<button class="btn btn col-4 py-4" id="division">/</button>
<button class="btn btn col-4 py-4" id="AC">AC</button>
<button class="btn btn col-4 py-4" id="Back">Back</button>
<button class="btn btn col-4 py-4" id="equl">=</button>
</div>
</div>
</div>
</div>
</body>
</html>JavaScript:
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var btn4=document.getElementById("btn4");
var btn5=document.getElementById("btn5");
var btn6=document.getElementById("btn6");
var btn7=document.getElementById("btn7");
var btn8=document.getElementById("btn8");
var btn9=document.getElementById("btn9");
var btn0=document.getElementById("btn0");
var addition=document.getElementById("addition");
var subtract=document.getElementById("subtract");
var multiplication=document.getElementById("multiplication");
var division=document.getElementById("division");
var AC=document.getElementById("AC");
var Back=document.getElementById("Back");
var equl=document.getElementById("equl");
var point=document.getElementById("point");
point.addEventListener("click", function(){
document.getElementById("display").value+=".";
})
btn1.addEventListener("click", function(){
document.getElementById("display").value+="1";
})
btn2.addEventListener("click", function(){
document.getElementById("display").value+="2";
})
btn3.addEventListener("click", function(){
document.getElementById("display").value+="3";
})
btn4.addEventListener("click", function(){
document.getElementById("display").value+="4";
})
btn5.addEventListener("click", function(){
document.getElementById("display").value+="5";
})
btn6.addEventListener("click", function(){
document.getElementById("display").value+="6";
})
btn7.addEventListener("click", function(){
document.getElementById("display").value+="7";
})
btn8.addEventListener("click", function(){
document.getElementById("display").value+="8";
})
btn9.addEventListener("click", function(){
document.getElementById("display").value+="9";
})
btn0.addEventListener("click", function(){
document.getElementById("display").value+="0";
})
addition.addEventListener("click", function(){
document.getElementById("display").value+="+";
})
subtract.addEventListener("click", function(){
document.getElementById("display").value+="-";
})
multiplication.addEventListener("click", function(){
document.getElementById("display").value+="*";
})
division.addEventListener("click", function(){
document.getElementById("display").value+="/";
})
equl.addEventListener("click", function(){
var a=document.getElementById("display").value;
var sum = eval(a)
document.getElementById("display").value=sum;
})
Back.addEventListener("click", function(){
var str=document.getElementById("display").value;
var back=str.substr(0,str.length-1);
document.getElementById("display").value=back;
})
AC.addEventListener("click", function(){
document.getElementById("display").value="";
})
What is HTML? Introduction of HTML -: Click Here
JavaScript Introduction -: Click Here