<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="calculator.css">

    </head>
    <body>
<h1>Js Calculator Project</h1>
<div class="calc">
    <input type="text" class="display">



<div class="calc-button">
    <button class="c-button" value="7">7</button>
    <button class="c-button" value="8">8</button>
    <button class="c-button" value="9">9</button>
    <button class="c-button operator" value="+">+</button>

    <button class="c-button" value="4">4</button>
    <button class="c-button" value="5">5</button>
    <button class="c-button" value="6">6</button>
    <button class="c-button operator" value="-">-</button>

    <button class="c-button" value="1">1</button>
    <button class="c-button" value="2">2</button>
    <button class="c-button" value="3">3</button>
    <button class="c-button operator" value="*">*</button>
    <button class="c-button is-clear operator" value="C">C</button>


    <button class="c-button is-zero" value="0">0</button>
    <button class="c-button operator" value="DEL">DEL</button>
    <button class="c-button operator" value="/">/</button>
    <button class="c-button is-equals operator" value="=">=</button>
    
    






</div>
</div>
    </body>
    <script src="./calculator.js"></script>
</html>
@import url('https://fonts.googleapis.com/css?family=Space+Mono');
*{
    box-sizing: border-box;
}

body{
    background: bisque;
    padding-bottom: 30px;
    padding-top: 30px;
}
.calc {
    max-width: 350px;
    margin: 0 auto;
    border: 10px solid grey;
    border-radius: 20px;
    box-shadow: 20px 15px goldenrod;
}
.c-button {
    background: goldenrod;
    border: 1px solid #000;
    padding: 15px;
    color: #000;
    border-radius: 10%;
    font-size: 22px;
    cursor: pointer;

}

.calc input {
    background: whitesmoke;
    border: none;
    box-shadow: none;
    outline: none;

    padding: 10px;
    width: 100%;
    border-bottom: 2px solid #111;
    color: #333;
    text-align: right;
    font-size: 40px;
    border-radius: 2px;
}

.calc-button {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
}
/*.is-zero,.is-clear {
    grid-column: span 2;
}*/

.is-clear {
    background: oldlace;
}

.is-equals, .is-clear, .operator {
    background: oldlace;
}

.calc input, .calc-button {
    font-family: monospace;
}
.is-equals {
    grid-column: span 4;
}
h1 {
    text-align: center;
    font-family: fantasy;
    font-weight: bolder;
    color: lightslategray;
    text-transform: uppercase;
}

const button = document.querySelectorAll("button");
const display = document.querySelector(".display");

for(let i = 0; i < button.length; i++){
    button[i].addEventListener("click", calculate);
};
 

/*buttons.forEach(function(button){
    button.addEventListener("click", calculate)
});*/


function calculate(digits){
    const calculateDigits = digits.target.value;
    if(calculateDigits === "="){
        if(display.value !== ""){
            display.value = eval(display.value);
        }
    }else if(calculateDigits === "C"){
        display.value = "";
    }else if(calculateDigits === "DEL"){
        display.value = display.value.substr(display.value.length - 1);
    }else{
        display.value += calculateDigits;
    }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.