JavaScript Calculator Project with Source Code

javascript calculator

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):

Download Project

Or simple view the source code below:

Page Contents
index.html
mathcalc.css
mathcalc.js

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.

Leave a Reply