Step by step How To Build A Simple Calculator Using Html, Css and JS
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">
<link rel="stylesheet" href="style.css">
<title>Simple Calculator</title>
</head>
<body>
<div class="container">
<div class="container">
<input type="text" class="cal-display" placeholder="0" readonly="readonly">
<div class="cal-keys">
<div class="cal-row">
<button class="num" value="7"> 7</button>
<button class="num" value="8"> 8</button>
<button class="num" value="9"> 9</button>
<button class="op btn-blue" value="+"> +</button>
</div>
<div class="cal-row">
<button class="num" value="4"> 4</button>
<button class="num" value="5"> 5</button>
<button class="num" value="6"> 6</button>
<button class="op btn-blue" value="-"> -</button>
</div>
<div class="cal-row">
<button class="num" value="1"> 1</button>
<button class="num" value="2"> 2</button>
<button class="num" value="3"> 3</button>
<button class="btn-blue op " value="*"> *</button>
</div>
<div class="cal-row">
<button class="num" value="0"> 0</button>
<button class="num" value="."> .</button>
<button class="op btn-blue" value="/"> /</button>
<button class="btn-blue " id="clear" value=" "> C</button>
</div>
<div class="cal-row">
<button class="btn-equal" value="="> = </button>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>CSS
/* bg #0086FF;
border #3498db;
color #ecf0f1
btn op #9ACDFF;
box- shadow for button -webkit-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.75);
boxshadow for container -webkit-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
-moz-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
*/
body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
width: 300px;
height: auto;
border: 1px solid #0086FF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
-moz-box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
box-shadow: -1px 8px 8px 1px rgba(123, 144, 169, 1);
}
input[type="text"]{
height: 50px;
width: 280px;
padding: 15px 10px;
color: #ecf0f1;
font-weight: 800;
text-align: right;
border: none;
background: #0086FF;
font-size: 40px;
margin-bottom: 15px;
}
input[type="text"]::placeholder{
color: #ecf0f1;
font-weight: 800;
}
.cal-keys .cal-row{
display: flex;
justify-content: center;
align-items: center;
}
.cal-keys .cal-row button{
width: 50px;
height: 50px;
margin: 5px;
font-size: 25px;
font-weight: 400;
border: none;
border: 1px solid #3498db;
border-radius: 5px;
background: #ecf0f1;
cursor: pointer;
-webkit-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 8px 8px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.75);
}
.cal-keys .cal-row button:focus{
outline: none;
}
.cal-keys .cal-row button:active{
transform: translate(.1rem);
border: none;
}
.cal-keys .cal-row .btn-equal{
width: 77%;
background: #0086FF;
color: #ecf0f1;
margin-bottom: 20px;
}
.cal-keys .cal-row .btn-blue{
background: #9ACDFF;
color: #ecf0f1;
}
JAVASCRIPT
const result = document.querySelector('.cal-display')
const clear = document.querySelector('#clear')
const compute = document.querySelector('.btn-equal')
const buttons = document.querySelectorAll('.num, .op')
// console.log(buttons)
let input = [];
//Array.form() to convert buttons to Array
//loop throungh the button to acces each
Array.from(buttons).forEach((button)=>{
//Add event listener to button
button.addEventListener('click', ()=>{
const operator = ['+', '-', '/', '*']
//display result and checking if
if (input[input.length-1] == '=' && !operators.includes(button.value)){
result.value = button.value;
}else{
result.value += button.value;
}
input.push(button.value)
})
})
// add event listener click to (=)
compute.addEventListener('click', ()=>{
input.push('=');
//checking
if(result.value.length == 0){
return false
}else{
result.value = eval(result.value)
}
})
// clear the screen
clear.addEventListener('click', () =>{
result.value=''
})
(Visited 2,407 times, 1 visits today)
Nice one. Please I need you to send me some JavaScript tutorial @ +2348147367859
Ok i will message you on whatapps
Thanks
thank you i need you more to send me some more project
Doesnt work.
which part of the code are you having an issue