[자바스크립트] 간단한 계산기 만들기

프론트엔드/Tips

[자바스크립트] 간단한 계산기 만들기

Marshall K 2019. 4. 7. 20:26

아는 동생한테 html, css 적당히 가르쳐주고 이제 javascript 차롄데...자바스크립트를 배우니 바로 계산기부터 만든다더라고요. C를 배워서 그런가...

당연히 하루 배워서 계산기 만들기는 무리였고..제가 짜봤습니다.

See the Pen Simple Calculator by Marshall (@marshall-ku) on CodePen.

간단한 작동만 테스트한 거라, 모든 상황에서 잘 작동할진 모르겠습니다.

Javascript

const input = document.getElementsByClassName("input")[0],
    tmp = document.getElementsByClassName("tmp")[0];

function i_empty() {
    input.innerText = ""
}

function t_empty() {
    tmp.innerText = ""
}

document.getElementsByClassName("all-clear")[0].addEventListener("click", function () {
    i_empty(),
        t_empty()
}),
document.getElementsByClassName("clear")[0].addEventListener("click", function () {
    i_empty()
}),
Array.from(document.querySelectorAll('.number')).forEach(a => {
    a.addEventListener('click', function () {
        if (input.innerText.length <= 19) {
            input.innerText = input.innerText + this.innerText
        } else {
            alert("최대 입력 범위를 초과했습니다!")
        }
    });
}),
document.getElementsByClassName("dot")[0].addEventListener("click", function () {
    if (input.innerText.indexOf(".") === -1) {
        input.innerText = input.innerText + "."
    }
}),
document.getElementsByClassName("sign")[0].addEventListener("click", function () {
    if (input.innerText.indexOf("-") === -1) {
        input.innerText = "-" + input.innerText
    } else {
        input.innerText = input.innerText.replace("-", "")
    }
}),
Array.from(document.querySelectorAll('.amt')).forEach(a => {
    a.addEventListener('click', function () {
        if (input.innerText !== "") {
            if (tmp.innerText === "") {
                tmp.innerText = input.innerText + " " + this.innerText
            } else {
                tmp.innerText = tmp.innerText + " " + input.innerText + " " + this.innerText
            }
        }
        if (input.innerText === "" && tmp.innerText !== "") {
            tmp.innerText = tmp.innerText.slice(0, -1) + " " + this.innerText
        }
        i_empty()
    });
}),
document.getElementsByClassName("result")[0].addEventListener("click", function () {
    if (input.innerText !== "") {
        input.innerText = eval(tmp.innerText + input.innerText),
            t_empty()
    }
});