How to build a calculator using HTML CSS and JavaScript

Wadie Mendja June 24, 2020
Projects are the best way to learn programming in general, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript while still being simple enough for people of any skill level. If you want to learn JavaScript and CSS concepts or even improve your skills in them more further this is a must do project.

calculator HTML CSS JavaScript

HTML first:

In order for us to have an organized work I intended to use a table for this matter, it's not necessary to do this with the table tag and its inner components, it's just the way I see it should be done, you can use your own way if you're not comfortable with that.

<html>
<head>
<title>Calc</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<center>
<table class="calc">
<tr>
<td id="actions" colspan="4"></td>
</tr>
<tr>
<td id="screen" colspan="4">0</td>
</tr>
<tr>
<td><button id="10" onclick="display(10)">(</button></td>
<td><button id="11" onclick="display(11)">)</button></td>
<td><button id="12" onclick="clean()">C</button></td>
<td><button id="13" onclick="display(13)">/</button></td>
</tr>
<tr>
<td><button id="9" onclick="display(9)">7</button></td>
<td><button id="8" onclick="display(8)">8</button></td>
<td><button id="7" onclick="display(7)">9</button></td>
<td><button id="14" onclick="display(14)">*</button></td>
</tr>
<tr>
<td><button id="6" onclick="display(6)">4</button></td>
<td><button id="5" onclick="display(5)">5</button></td>
<td><button id="4" onclick="display(4)">6</button></td>
<td><button id="15" onclick="display(15)">-</button></td>
</tr>
<tr>
<td><button id="3" onclick="display(3)">1</button></td>
<td><button id="2" onclick="display(2)">2</button></td>
<td><button id="1" onclick="display(1)">3</button></td>
<td><button id="16" onclick="display(16)">+</button></td>
</tr>
<tr>
<td><button id="0" onclick="display(0)">0</button></td>
<td><button id="18" onclick="display(18)">.</button></td>
<td class="eq" colspan="2"><button id="19" class="eqq" onclick="calc()">=</button></td>
</tr>
</table>
</center>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

CSS:

table {
border: 10px solid gray ;
background: lightyellow ;
border-radius: 10px ;
}
table td{
height: 100px ;
width: 100px ;
}
.eqq {
width: 200px ;
}
button {
height: 100px ;
width: 100px ;
font-size: 70px ;
grid-row-gap :200px;
background: rgba(59,173,227,1);
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
color: black;
}
#screen {
border: 2px solid gray ;
width: 400px;
height: 50px ;
border-top: none ;
text-align: right;
font-size: 40px ;
font-weight: bold ;
}
#actions {
border: 2px solid gray ;
width: 400px ;
height: 30px;
border-bottom: none ;
font-size: 20px ;
font-weight: bold ;
}
view raw style.css hosted with ❤ by GitHub

JavaScript:

Here we have 3 functions:

1) display(id): this function runs when the user clicks at any button except the "=" button and "C" button because these two button have their own functionality which we gonna talk about later, the display function shows the user actions, it takes the inner HTML of the clicked button and put it on the top of the display screen so the user can see what's happening.

2) clean(): which clears the screen, this function runs specifically when the user clicks on C button.

3) calc(): runs when the user clicks on the "=" button, which is going to evaluate the user actions (which are th innerHTML of the tag that has the id "actions") and put the result on the tag that has the id "screen".

function display(id) {
document.getElementById("actions").innerHTML+=document.getElementById(id).innerHTML ;
}
function clean () {
document.getElementById("actions").innerHTML="";
document.getElementById("screen").innerHTML="0";
}
function calc () {
document.getElementById("screen").innerHTML=eval(document.getElementById("actions").innerHTML);
}
view raw main.js hosted with ❤ by GitHub

Try the calculator Here: https://bit.ly/2X2wtuf

Download source code: https://github.com/wadiemendja/calculator
Tags

Post a Comment

0 Comments