Build Simple Calculator using HTML CSS and JavaScript | Html Css JavaScript Project

Here we are going to build a simple calculator using html css and javascript. After learning basics of HTML CSS and JavaScript, you must start creating projects immediately. If you want to be a good developer you must practice developing. At beginner level, simple html css javascript projects like digital clock, stop watch, tic-tac-toe game, simple calculator, basic website, age calculator etc etc are the best ones to polish your developing skills.

Calculators were created for helping people to do mathematical operations very easily. Simple calculator that we are going to build can perform operations like addition, subtraction, multiplication, division, and modulus. So I think it is a good html css javascript project for beginners.

For this project I will suggest you to use VS Code as it is free, built on open source and a powerful source code editor that runs on Windows, Linus and macOs. There are hundreds of extensions that makes vs code a all-in-one editor. There are also lots of features which will help you while writing a code.

Create three new files for html css and javascript seperately and link them all in html file. HTML is the skeleton of our website, css adds design to the contents of HTML file and JavaScript adds the functionality in our Calculator.

Build Simple Calculator using HTML CSS and JavaScript -

HTML Code (index.html)

<!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="style.css">
    <title>Calculator</title>
</head>
<body>
    <div class="container">
        <div class="calculator">
            <input type="text" placeholder="0" id="screen">
            <button class="first" onclick="allclear()">AC</button>
            <button class="first" onclick="clear()">C</button>
            <button class="first" onclick="show('%')">%</button>
            <button class="symbol" onclick="show('/')">&divide;</button>
            <button onclick="show('7')">7</button>
            <button onclick="show('8')">8</button>
            <button onclick="show('9')">9</button>
            <button class="symbol" onclick="show('-')">-</button>
            <button onclick="show('4')">4</button>
            <button onclick="show('5')">5</button>
            <button onclick="show('6')">6</button>
            <button class="symbol" onclick="show('*')">&times;</button>
            <button onclick="show('1')">1</button>
            <button onclick="show('2')">2</button>
            <button onclick="show('3')">3</button>
            <button class="symbol" onclick="show('+')">+</button>
            <button onclick="show('00')">00</button>
            <button onclick="show('0')">0</button>
            <button onclick="show('.')">.</button>
            <button class="symbol" onclick="calc()">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Code (style.css)

.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
input{
    display: grid;
    grid-column: span 4;
    height: 100px;
    width: 260px;
    border: none;
    border-radius: 12px;
    background: black;

    font-size: xx-large;
    color: white;
    
    text-align: end;
}
.calculator{
    display: grid;
    grid-template-columns: repeat(4,2fr);
    border: 1px solid #565151;
    border-radius: 2px;
    padding: 12px;
    height: 450px;
    border-radius: 27px;
    background: black;
    box-shadow: 0px -2px 5px 0px #5a5a5a, 0px 2px 5px 2px black;
}
button{
    border-radius: 27px;
    border: none;
    height: 59px;
    width: 58px;
    font-size: x-large;
}
.first
{
    background: rgb(167 177 223);
}
.symbol
{
    background: rgb(255 191 0);
}
button:active
{
    background: rgb(144, 144, 199);
}

JavaScript Code (script.js)

let display=document.getElementById("screen");
function allclear()
{
    display.value = "";
}

function clear()
{
    display.value = display.value.slice(0, -1);
}

function show(n)
{
    display.value += n;
}

function calc()
{
    display.value = eval(display.value);
}

We have used four functions viz. allclear(), clear(), show(), and calc() which adds functionality in our calculator. We are using one variable display to access DOM using Id and accordingly performing some specific task in each functions.

• allclear() - It clears all the value by assigning an empty string.

• clear() - It clears elements one by one.

• show() - It appends the value of the clicked button on the screen.

• calc() - It makes use of eval() function. eval() function evaluates expression passed to it and return the result.

LIVE DEMO -

Now that we have build a good looking simple calculator using html css and javascipt, I will suggest you to not only copy paste the code but also to practice on your own. Go ahead and make changes in the code and see what visible changes you see, try to give this calculator a different look. Code the entire calculator on your own and if at any point you feel any problem or feel like stuck at some point, come back and see the code, understand the code and then again code yourself. Remember copy pasting won't make you good at developing but practicing on your own will.