JavaScript Calculator
Create a folder and name it Calculator. Inside this folder create three files first one is index.html, second style.css and third one is script.js and copy and paste the following code properly inside your files.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id="display">
<p>
<span id="previousInput"></span>
<span id="operation"></span>
<span id="current"></span><br><br>
<span id="Result">0</span>
</p>
</div>
<button class="item delete">D</button>
<button class="item clear">CE</button>
<button class="item operator">/</button>
<button class="item">1</button>
<button class="item">2</button>
<button class="item">3</button>
<button class="item operator">*</button>
<button class="item">4</button>
<button class="item">5</button>
<button class="item">6</button>
<button class="item operator">-</button>
<button class="item">7</button>
<button class="item">8</button>
<button class="item">9</button>
<button class="item operator">+</button>
<button class="item dot">.</button>
<button class="item">0</button>
<button class="item equal">=</button>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
font-family: montserrat, sans-serif;
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
#container{
display: grid;
grid-template-columns: auto auto auto auto;
width: 360px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}#display{
grid-column: 1/5;
background: rgba(0,0,0,0.7);
color: white;
text-align: right;
padding: 10px 20px;
}
.clear{
grid-column: 2/4
}
.item{
padding: 20px;
border: none;
font-size: 18px;
font-family: montserrat, sans-serif;
margin: 0.5px;
}
.equal{
grid-column: 3/5
}
#Result{
font-size: 22px;
}
JavaScript
window.onload = function(){
const buttons = document.querySelectorAll('button');
const previousInput = document.querySelector('#previousInput');
const operation = document.querySelector('#operation');
const current = document.querySelector('#current');
const Result = document.querySelector('#Result');
let firstInput = '';
let secondInput = '';
let operator = ''
let currentInput = ''
buttons.forEach(function(btn){
btn.addEventListener('click',function(){
// delete button
if( btn.className.match('delete') ){
currentInput = currentInput.slice(0, -1);
Result.innerText = currentInput;
}
// clear all btn
else if( btn.className.match('clear') ){
firstInput = '';
secondInput = '';
operator = ''
currentInput = ''
Result.innerText = '0'
previousInput.innerText ='';
operation.innerText = '';
current.innerText = '';
}
// operator
else if( btn.className.match('operator') ){
if( secondInput === ''){
firstInput = currentInput;
operator = btn.innerText;
previousInput.innerText = firstInput;
operation.innerText = operator;
Result.innerText ='0';
currentInput = ''
}
}
// dot period
else if( btn.className.match('dot') ){
if( currentInput.indexOf('.') === -1 ){
Result.innerText += '.';
currentInput+='.'
}else {
return;
}
}
// equal
else if( btn.className.match('equal') ){
secondInput = currentInput;
current.innerText = secondInput;
let result = eval( firstInput + operator + secondInput );
Result.innerText = result;
}
// number
else{
currentInput += btn.innerText
Result.innerText= currentInput;
}
});
});
}
