간단한 계산기

계산기 html

<div class="calculator">
        <div class="backmain">
            <div id="calculate">0</div>
            <!-- 계산기 숫자영역 -->
            <div class="number_field">
                <button onclick="input('1')" id="num1">1</button>
                <button onclick="input('2')" id="num2">2</button>
                <button onclick="input('3')" id="num3">3</button>
                <button onclick="input('4')" id="num4">4</button>
                <button onclick="input('5')" id="num5">5</button>
                <button onclick="input('6')" id="num6">6</button>
                <button onclick="input('7')" id="num7">7</button>
                <button onclick="input('8')" id="num8">8</button>
                <button onclick="input('9')" id="num9">9</button>
                <button onclick="input('0')" id="num0">0</button>
            </div>
            <!-- 나머지 연산영역 -->
            <input type="button" id="delete" value="C">
            <input type="button" id="addition" value="+" accesskey="+">
            <input type="button" id="subtraction" value="-" accesskey="-">
            <input type="button" id="multilication" value="*" accesskey="*">
            <input type="button" id="division" value="/" accesskey="/">
            <input type="button" id="equal" value="=">
        </div>
    </div>

계산기 css

grid 연습겸 만들어본 css

*{
    margin: 0px;
    padding: 0px;
}
.calculator{
    display: grid;
    grid-template-columns: repeat(11,100px);
    grid-template-rows: repeat(11,100px);
}
.backmain{
    border-radius: 5px;
    border: 3px solid rgb(232, 255, 170);
    background:linear-gradient(rgb(255, 241, 115), rgb(255, 179, 179));
    grid-column: 2/10;
    grid-row: 2/10;
    display: grid;
    grid-template-rows: repeat(11,1fr);
    grid-template-columns: repeat(11,1fr);
}
#calculate{
    border: 0px;
    background-color: rgba(0, 0, 0, 0.1);
    grid-row: 2/3;
    grid-column: 2/11;
    width: 100%;
    height: 100%;
    font-size: 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.number_field{
    grid-row: 4/11;
    grid-column: 2/7;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, 1fr);
}
.backmain input[type="button"],
.backmain button{
    border: 0px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgb(65, 62, 62);
    transition: 0.2s;
    font-size: 2em;
}

.backmain input[type="button"]:hover,
.backmain button:hover{
    font-size: 2.2em;
    font-weight: 600;
}
.backmain input[type="button"]:active,
.backmain button:active{
    box-shadow: 0px 0px 0px pink;
    font-size: 12%
}



#num1{width: 100%; height: 100%; grid-row: 1/2; grid-column: 1/2;}
#num2{width: 100%; height: 100%; grid-row: 1/2; grid-column: 3/4;}
#num3{width: 100%; height: 100%; grid-row: 1/2; grid-column: 5/6;}
#num4{width: 100%; height: 100%; grid-row: 3/4; grid-column: 1/2;}
#num5{width: 100%; height: 100%; grid-row: 3/4; grid-column: 3/4;}
#num6{width: 100%; height: 100%; grid-row: 3/4; grid-column: 5/6;}
#num7{width: 100%; height: 100%; grid-row: 5/6; grid-column: 1/2;}
#num8{width: 100%; height: 100%; grid-row: 5/6; grid-column: 3/4;}
#num9{width: 100%; height: 100%; grid-row: 5/6; grid-column: 5/6;}
#num0{width: 100%; height: 100%; grid-row: 7/8; grid-column: 2/5;}

#delete{width: 100%; height: 100%; grid-row: 8/9; grid-column: 8/11;}
#equal{width: 100%; height: 100%; grid-row: 10/11; grid-column: 8/11;}
#addition{width: 100%; height: 100%; grid-row: 4/5; grid-column: 8/9;}
#subtraction{width: 100%; height: 100%; grid-row: 4/5; grid-column: 10/11;}
#multilication{width: 100%; height: 100%; grid-row: 6/7; grid-column: 8/9;}
#division{width: 100%; height: 100%; grid-row: 6/7; grid-column: 10/11;}

계산기 js

var formula = "";
var answer = "";
let wd = document.getElementById("calculate");


//함수를 쓴 모습
function input(a) {
    formula += a;
    wd.innerHTML = formula;
};


//함수를 안쓴 모습
var del = document.getElementById("delete").onclick = function () {
    formula = "";
    wd.innerHTML = formula;
};
var add = document.getElementById("addition").onclick = function () {
    formula += "+";
    wd.innerHTML = formula;
};
var sub = document.getElementById("subtraction").onclick = function () {
    formula += "-";
    wd.innerHTML = formula;
};
var mul = document.getElementById("multilication").onclick = function () {
    formula += "*";
    wd.innerHTML = formula;
};
var div = document.getElementById("division").onclick = function () {
    formula += "/";
    wd.innerHTML = formula;
};
var equal = document.getElementById("equal").onclick = function () {
    console.log(formula);
    answer = eval(formula);
    formula = answer;
    console.log("답 : " + answer);
    wd.innerHTML = formula;
};

봐주셔서 감사합니다.