hello everyone and welcome to a new Tutorial, Today we will learn how to make a Simple Calculator using JavaScript. it's a very simple project that I recommend for beginners because you will learn how to manipulate DOM, how to use functions and you will learn about some javascript methods so let's start.
The App Design
first, we need to create the Application design using HTML and CSS
you can create your custom application design or you can copy and paste the code below.
Tips: I really advise you to use CSS grid to make the button layout because it's simple and easy to use.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Calculator</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
<div class="calc_body">
<div class="result">
<p id="result">0</p>
</div>
<div class="buttons">
<button>+/-</button>
<button>%</button>
<button>C</button>
<button>DEL</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>*</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button>.</button>
<button>0</button>
<button class="equal">=</button>
<button>-</button>
</div>
</div>
<script src='main.js'></script>
</body>
</html>
main.css:
@import url('https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito', sans-serif;
}
.calc_body{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #fafafa;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.result{
background-color: #212121;
color: #fafafa;
border-radius: 8px 8px 0 0;
padding: 20px;
font-size: 2.5rem;
}
.buttons{
display: grid;
grid-template-columns: auto auto auto auto;
}
.buttons button{
width: 80px;
height: 80px;
border: none;
font-size: 1.5rem;
text-align: center;
transition: .2s linear all;
}
.buttons button:hover{
background-color: #e0e0e0;
}
.buttons button:active{
background-color: #bdbdbd;
}
.equal{
background-color: #f57f17;
}
JavaScript part:
now let's focus on the javascript code.
first of all, we will create a function that will get the button's inputs.
function getInputValue(){
let input = event.target.innerText
console.log(input);
printValue(input);
}
after that, we need to add the onclick() event to every button, of course we can add it manually in our HTML file but it will be too long so let's do it programmatically using JavaScript. for this, we will get the button by their tag name and then we will use a loop to add to each button the onclick attribute like this.
let buttons = document.getElementsByTagName('button');
console.log(buttons.length);
for(var i =0; i<buttons.length;i++){
buttons[i].setAttribute('onclick','getInputValue()');
}
now we will make our output function to print the text inside our result field.
function printValue(val){
let out = document.querySelector("#result");
let current = out.innerHTML;
if(out.innerHTML == "0"){
if(val!= "C" && val!="DEL"){
out.innerHTML ="";
out.innerHTML += val;
}
}
else{
if(val == "DEL" ){
console.log(current[current.length-1]);
out.innerText = current.slice(0,-1);
if(out.innerHTML.length <= 1){
out.innerHTML = "0";
}
}
if(val!= "C" && val!="DEL" && val!="="){
out.innerHTML += val;
}
if(val =="="){
let res = out.innerHTML;
out.innerHTML = eval(res);
}
if(val == "C"){
out.innerHTML = "0";
}
}
}
the eval() method
as you can see, we used the eval function to print the result.
the eval() method allows you to convert a mathematic formula in a string format into the result for example if you write:
console.log(eval("(2+2)*2"));
the result will be 8, and that's why creating a calculator in javascript is very easy.
I hope that you've liked this simple tutorial, please tell us in the comment what do you want for the next tutorial. thank you.
I hope that you've liked this simple tutorial, please tell us in the comment what do you want for the next tutorial. thank you.
Make a Calculator App in HTML CSS and JavaScript
Reviewed by Medics
on
March 19, 2020
Rating:
Reviewed by Medics
on
March 19, 2020
Rating:
Please I follow the calculator code to do it, but when I try to type on any button to add or subtract nothing shows. Where should I add the JavaScript codes to, the CSS or the HTML? Thanks
ReplyDelete