Build Calculator using HTML, CSS and Javascript

Let's create a Calculator using HTML. Style with CSS and add functionality with Javascript.

Watch on YouTube

HTML

                    

                        content_copy
                        copy
                    

                        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>

    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div class="container">
        <div class="display"></div>
        <div class="numpad">
            <button class="btn num">0</button>
            <button class="btn operator">.</button>
            <button class="btn operator">%</button>
            <button class="btn operator">+</button>
            <button class="btn num">1</button>
            <button class="btn num">2</button>
            <button class="btn num">3</button>
            <button class="btn operator">-</button>
            <button class="btn num">4</button>
            <button class="btn num">5</button>
            <button class="btn num">6</button>
            <button class="btn operator">*</button>
            <button class="btn num">7</button>
            <button class="btn num">8</button>
            <button class="btn num">9</button>
            <button class="btn operator">/</button>
            <button class="btn del">Del</button>
            <button class="btn clear">CA</button>
            <button class="btn equal">=</button>
        </div>
    </div>
</body>
<script src="/script.js"></script>
</html>

CSS

                    

                        content_copy
                        copy
                    

                    
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    width: 350px;
    background-color: #e2c290;
}
.display{
    height: 70px;
    background-color: #4C3549;
    margin: 60px 30px 30px 30px;
    color: white;
    font-size: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: end;
    overflow-x: auto;
}
.numpad{
    display: grid;
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: repeat(5, 60px);
    gap: 15px;
    justify-content: center;
    margin: 40px 0px 60px 0;
}
.btn{
    border-radius: 50%;
    border: none;
    outline: none;
    color: white;
    font-size: 24px;
}
.num{
    background-color: #1B4079;
}
.operator{
    background-color: #301A4B;
}
.equal{
    grid-column: 3/5;
    grid-row: 5;
    background-color: #018E42;
    border-radius: 5px;
}
.clear, .del{
    background-color: #FE5F55;
}

JavaScript

                    

                        content_copy
                        copy
                    

                    
let btns = document.querySelectorAll('.btn');
let display = document.getElementsByClassName("display")[0];

btns.forEach(btn => {
    btn.addEventListener('click', (e) => {
        if(btn.textContent == 'Del'){
            // remove last character
            display.textContent = display.textContent.slice(0, -1);
        }
        else if(btn.textContent == 'CA'){
            // clear all content
            display.textContent = '';
        }
        else if(btn.textContent == '='){
            let result  = eval(display.textContent);
            // if number is decimal then limit the result to 5 decimal places
            display.textContent = Number.isInteger(result)?result:result.toFixed(5);
        }
        else{
            // add the pressed button text to display
            display.textContent += btn.textContent;
        }
    })
})