Get the complete source code of JavaScript calculator project programmed using html, CSS and simple JavaScript. Custom fonts (PixelPoint, Play-bold, Play-regular) have been used to give a much better and aesthetic look and these fonts have been added in the source file.
You can directly download the project here (including the custom fonts):
Or simple view the source code below:
Page Contents
index.html
<!--
JavaScript Calculator
This code was uploaded at tetrageek.com
For more amazing programming projects you can visit tetrageek.com/programming
-->
<!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">
<link rel="stylesheet" href="mathcalc.css">
<title>Calculator - Ali Mazhar</title>
</head>
<body>
<div class="calculator">
<p><b>TetraGeek.com</b></p>
<div id="display-screen"></div>
<div class="buttons">
<div class="button M">MC</div>
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button clear">C</div>
<div class="button M">MS</div>
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operator">+</div>
<div class="button M">MR</div>
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operator">-</div>
<div class="button M">M+</div>
<div class="button operator">±</div>
<div class="button number">0</div>
<div class="button operator">.</div>
<div class="button operator">*</div>
<div class="button equal">=</div>
<div class="button operator">√</div>
<div class="button operator">x2</div>
<div class="button operator">1/x</div>
<div class="button operator">/</div>
</div>
</div>
<script src="mathcalc.js"></script>
</body>
</html>
mathcalc.css
@font-face {
font-family: Pixel;
src: url('fonts/PixelPoint.ttf');
}
@font-face {
font-family: Play;
src: url('fonts/Play-Regular.ttf');
}
body {
font-family: 'Play';
font-size: large;
}
p{
text-align: center;
}
.calculator {
width: 300px;
height: 525px;
background-color: rgb(247, 239, 239);
margin: auto;
padding-top: 5px;
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
border: 1px solid rgb(147, 144, 144);
border-radius: 1px;
}
#display-screen {
font-family: 'Pixel';
background-color: white;
color: black;
width: 88%;
height: 15%;
margin: auto;
border: 1px solid #bbb;
box-shadow: inset 0px 0px 4px 0px rgb(40, 39, 39);
padding:10px;
}
.buttons {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
margin: 5px;
text-align: center;
}
.button {
height: 52px;
padding-top: 12px;
text-align: center;
margin: 3px;
text-align: center;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.button:hover {
background-color: #f1f1f1;
border-color: #bbb;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.button:active{
font-weight: bold;
}
.button:active{
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
.operator {
border: 1px solid #bbb;
background-color: #ddd;
}
.operators:hover {
background-color: #ddd;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-color: #aaa;
}
.equal {
background-color: #4d90fe;
border: 1px solid #3079ED;
color: white;
}
.equal:hover {
background-color: #307CF9;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-color: #1857BB;
}
.clear {
background-color: rgb(246, 50, 50);
color: white;
}
.clear:hover{
color: black;
}
.M {
background-color: aliceblue;
}
mathcalc.js
let display = document.getElementById("display-screen")
let btnPressed = document.getElementsByClassName('button');
let M;
for(let i = 0; i<btnPressed.length;i++)
{
btnPressed[i].addEventListener('click', (e) =>
{
if(btnPressed[i].textContent == 'C')
{
display.textContent = "";
}
else if(btnPressed[i].textContent == 'x2')
{
display.textContent = eval(display.textContent) * eval(display.textContent)
}
else if(btnPressed[i].textContent == '√')
{
display.textContent = Math.sqrt(eval(display.textContent))
}
else if(btnPressed[i].textContent == '1/x')
{
display.textContent = 1 / eval(display.textContent)
}
else if(btnPressed[i].textContent == '±')
{
display.textContent = - eval(display.textContent)
}
else if(btnPressed[i].textContent == '.')
{
display.textContent += ".0"
}
else if(btnPressed[i].textContent == 'MS')
{
M = eval(display.textContent)
}
else if(btnPressed[i].textContent == 'MC')
{
M = ""
}
else if(btnPressed[i].textContent == 'MR')
{
display.textContent += M
}
else if(btnPressed[i].textContent == 'M+')
{
M += eval(display.textContent)
}
else if(btnPressed[i].textContent == '=')
{
try
{
display.textContent = eval(display.textContent)
}
catch
{
display.textContent = "Syntax Error"
}
}
else
{
display.textContent += btnPressed[i].textContent
}
})
}
Any improvements to the code from your side would be highly appreciated. You can comment down your suggested modifications.