Javascript Calculator
Javascript Calculator is the best Project For Beginners in Javascript. Here You will learn the new Function eval() and other statements like IF_ELSE. This is the Wonderful Project Tryout.
HTML
<!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>CNB Calculator</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="calculator">
<div class="display">
<input type="text" name="" id="inputs">
<div class="outputs">
<!-- 100 -->
</div>
</div>
<div class="buttons">
<div class="rows">
<button class="clear">C</button> <button><</button>
<button>%</button> <button>÷</button>
</div>
<div class="rows">
<button>7</button> <button>8</button>
<button>9</button> <button>-</button>
</div>
<div class="rows">
<button>4</button> <button>5</button>
<button>6</button> <button>+</button>
</div>
<div class="rows">
<button>1</button> <button>2</button>
<button>3</button> <button>X</button>
</div>
<div class="rows">
<button>0</button> <button>±</button>
<button>.</button> <button>=</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.container{
display:flex;
justify-content: center;
align-items:center;
height:100vh;
}
.calculator{
/* height:450px; */
padding-bottom:2%;
width:350px;
display: flex;
flex-direction: column;
align-items: center;
padding-top:5%;
background-color:#16213E;
border-radius:5px;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.calculator .display{
height:100px;
width:320px;
background-color:#0F3460;
}
#inputs{
height:50px;
width:100%;
border:none;
background-color:transparent;
outline:none;
color:white;
font-family:poppins;
font-size:1.2rem;
padding-left:2%;
}
.outputs{
text-align:right;
padding-right:2%;
color:white;
font-family:Gilroy;
font-size:1.5rem;
}
.buttons{
width:320px;
margin-top:5%;
}
.buttons .rows{
display: flex;
justify-content:space-between;
}
.buttons button{
width:75px;
height:50px;
font-family:Poppins;
font-weight:bolder;
font-size:1.2rem;
margin-bottom:2%;
outline:none;
border:none;
border-radius:2px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px inset;
}
.buttons button:hover{
transition-duration:0.2s;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.clear{
background-color:#E94560;
color:white;
}
JAVASCRIPT
let buttons = document.querySelectorAll('button');
let inputs = document.getElementById('inputs');
let outputs = document.querySelector('.outputs');
buttons.forEach(element => {
element.addEventListener('click',(e)=>{
if(e.target.innerHTML=="="){
outputs.textContent = eval(inputs.value);
}else if(e.target.innerHTML=="C"){
inputs.value="";
outputs.textContent="";
}else if(e.target.innerHTML=="X"){
inputs.value = inputs.value + "*";
}else if(e.target.innerHTML=="÷"){
inputs.value = inputs.value + "/";
}else if(e.target.innerHTML=="<"){
inputs.value = inputs.value.slice(0,-1);
}else if(e.target.innerHTML=="±"){
let output = parseInt(outputs.textContent);
if(output<0){
outputs.textContent = outputs.textContent.slice(1);
}else{
outputs.textContent = "-"+outputs.textContent;
}
console.log(output);
}
else{
inputs.value = inputs.value + e.target.innerHTML;
}
})
});