<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>

<body>
    <div class="inputButton">
        <input type="text" id="textField">
    </div>
        <div class="inputButton">
            <div class="rowField">
                <button id="7b" class="small">7</button>
                <button id="8b" class="small">8</button>
                <button id="9b" class="small">9</button>
                <button id="+b" class="small">+</button>
            </div>

            <div class="rowField">
                <button id="4b" class="small">4</button>
                <button id="5b" class="small">5</button>
                <button id="6b" class="small">6</button>
                <button id="-b" class="small">-</button>
            </div>

            <div class="rowField">
                <button id="1b" class="small">1</button>
                <button id="2b" class="small">2</button>
                <button id="3b" class="small">3</button>
                <button id="*b" class="small">*</button>
            </div>

            <div class="rowField">
                <button id="0b" class="medium">0</button>
                <button id="/b" class="small">/</button>
            </div>

            <div class="rowField">
            <button id="submit" class="large">Calculate</button>
            </div>
        </div>
    <script src="popup.js"></script>
</body>

</html>
* {
    margin: 0;
    padding: 0;
}

body{
    background-color: #2b3252;
}

#textField{
    border: none ;
    border-radius: 2rem;
    padding: 0.25em;
    color:  #2b3252
}

.inputButton{
    margin : 0.5rem;
    max-width: 90%;
}

.rowField{
    display: flex;
    justify-content: space-between;
}

.small,
.medium,
.large{
    margin: 0.2rem;
    background-color: #fce77d;
    border: none ;
    border-radius: 2em;
    color:  #2b3252
}

.small:hover,
.medium:hover,
.large:hover{
    background-color: #ef5455
}

.small{
    width : 30%
}

.medium{
    width : 100%
}

.large{
    width:100%
}

document.getElementById("submit").addEventListener("click", calculate)
document.getElementById("7b").addEventListener("click", () => (des(7)))
document.getElementById("8b").addEventListener("click", () => (des(8)))
document.getElementById("9b").addEventListener("click", () => (des(9)))
document.getElementById("4b").addEventListener("click", () => (des(4)))
document.getElementById("5b").addEventListener("click", () => (des(5)))
document.getElementById("6b").addEventListener("click", () => (des(6)))
document.getElementById("1b").addEventListener("click", () => (des(1)))
document.getElementById("2b").addEventListener("click", () => (des(2)))
document.getElementById("3b").addEventListener("click", () => (des(3)))
document.getElementById("0b").addEventListener("click", () => (des(0)))
document.getElementById("+b").addEventListener("click", () => (des("+")))
document.getElementById("/b").addEventListener("click", () => (des("/")))
document.getElementById("-b").addEventListener("click", () => (des("-")))
document.getElementById("*b").addEventListener("click", () => (des("*")))

function calculate(){
    var input = document.getElementById("textField").value
    const value = eval(input)
    document.getElementById("textField").value=value
}

function des(val){

    document.getElementById("textField").value+=val
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.