계산기 만들기

키보드 입력도 가능하게 했다.
0-9 : 숫자입력
/, *, -, + : 연산자 입력
c : 초기화
Enter, = : 연산
Backspace : 지우기
최대한 계산기와 동일한 알고리즘으로 작동하길 원해서
(특히 = 연산자 누를시 반복 연산되는 것)
혼자 생각하긴 했다.
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculator</title>
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
            background-color: #1C2126;
        }

        #container {
            display: flex;
            flex-direction: column;
            width: 500px;
            height: 100%;
            margin: auto;
        }

        input {
            border-style: none;
            text-align: right;
        }

        input:focus {
            outline: none;
            text-align: right;
        }

        #titleBox {
            margin: auto;
            margin-top: 50px;
            font-weight: bold;
            font-size: 70px;
            color: white;
            user-select: none;
        }

        #resultBox {
            display: flex;
            width: 100%;
            height: 200px;
            margin-top: 20px;
            box-sizing: border-box;
            border: white solid 3px;
            border-radius: 20px;
        }

        #operator {
            position: relative;
            margin-top: 10px;
            width: 40px;
            top: 10px;
            left: 30px;
            height: 20%;
            font-size: 60px;
            font-weight: bold;
            color: white;
            background-color: #1C2126;
            border: none;
        }

        #result {
            position: relative;
            bottom: -80px;
            right: -10px;
            width: 90%;
            height: 40%;
            font-size: 60px;
            font-weight: bold;
            border: none;
            background-color: #1C2126;
            color: white;
            text-align: right;
            margin-right: 30px;
        }

        div {
            display: flex;
        }

        button {
            position: relative;
            display: block;
            width: 25%;
            height: 100px;
            box-sizing: border-box;
            border-radius: 10px;
            font-size: 30px;
            font-weight: bold;
            align-items: center;
            color: white;
        }

        .funtionKey {
            background-color: #31363B;
        }

        .funtionKey:hover {
            filter: brightness(140%);
        }

        .numberKey {
            background-color: #3F3F3F;
        }

        .numberKey:hover {
            filter: brightness(140%);
        }
    </style>
</head>
<body>
<container id="container">
    <titleBox id="titleBox">Geeno Calculator</titleBox>
    <resultBox id="resultBox">
        <input readonly type="text" id="operator">
        <input readonly type="text" id="result">
    </resultBox>
    <br>
    <div>
        <button class="numberKey" id="num-7">7</button>
        <button class="numberKey" id="num-8">8</button>
        <button class="numberKey" id="num-9">9</button>
        <button class="funtionKey" id="plus">+</button>
    </div>
    <div>
        <button class="numberKey" id="num-4">4</button>
        <button class="numberKey" id="num-5">5</button>
        <button class="numberKey" id="num-6">6</button>
        <button class="funtionKey" id="minus">ㅡ</button>
    </div>
    <div>
        <button class="numberKey" id="num-1">1</button>
        <button class="numberKey" id="num-2">2</button>
        <button class="numberKey" id="num-3">3</button>
        <button class="funtionKey" id="divide">÷</button>
    </div>
    <div>
        <button class="numberKey" id="clear">C</button>
        <button class="numberKey" id="num-0">0</button>
        <button class="numberKey" id="calculate">=</button>
        <button class="funtionKey" id="multiply">X</button>
    </div>
</container>

<script>
    let numberOne = '';
    let numberTwo = '';
    let operator = '';
    let resultCount = 0;
    let backSwitch = 0;
    const $operator = document.querySelector('#operator');
    const $result = document.querySelector('#result');


    const onClickNumber = (event) => {
        if (resultCount === 1) {
            numberTwo = '';
            resultCount = 0;
        }
        if (!operator) { // 비어있다
            numberOne += event.target.textContent;
            $result.value += event.target.textContent;
            return;
        }
        if (!numberTwo && !backSwitch) { // numberTwo가 비어있다면
            $result.value = '';
        }
        numberTwo += event.target.textContent;
        $result.value = numberTwo;
    }

    document.querySelector('#num-0').addEventListener('click', onClickNumber);
    document.querySelector('#num-1').addEventListener('click', onClickNumber);
    document.querySelector('#num-2').addEventListener('click', onClickNumber);
    document.querySelector('#num-3').addEventListener('click', onClickNumber);
    document.querySelector('#num-4').addEventListener('click', onClickNumber);
    document.querySelector('#num-5').addEventListener('click', onClickNumber);
    document.querySelector('#num-6').addEventListener('click', onClickNumber);
    document.querySelector('#num-7').addEventListener('click', onClickNumber);
    document.querySelector('#num-8').addEventListener('click', onClickNumber);
    document.querySelector('#num-9').addEventListener('click', onClickNumber);

    // 숫자 키 입력에 대한 이벤트 처리
    window.addEventListener('keydown', (event) => {
        const key = event.key;
        if (/[0-9]/.test(key)) { // 숫자키인 경우
            onClickNumber({target: {textContent: key}});
        }
    });

    // 연산자 키 입력에 대한 이벤트 처리
    window.addEventListener('keydown', (event) => {
        const key = event.key;
        if (key === '+') {
            onClickOperator('+')();
        } else if (key === '-') {
            onClickOperator('-')();
        } else if (key === '*') {
            onClickOperator('*')();
        } else if (key === '/') {
            onClickOperator('/')();
        } else if (key === 'c') {
            document.querySelector('#clear').click();
        } else if (key === 'Enter') { // #calculate 클릭 효과
            document.querySelector('#calculate').click();
        } else if (key === '=') { // #calculate 클릭 효과
            document.querySelector('#calculate').click();
        } else if (key === "Backspace") {
            onClickBackspace();
        }
    });

    // Backspace 클릭 이벤트 함수
    const onClickBackspace = () => {
        backSwitch = 1;
        if (resultCount === 1) {
            numberTwo = $result.value.slice(0, -1);
            $result.value = numberTwo;
        } else if (operator) {
            numberTwo = $result.value.slice(0, -1);
            $result.value = numberTwo;
        }
        if (numberOne && !operator && !numberTwo) {
            numberOne = numberOne.slice(0, -1);
            $result.value = numberOne;
        }
        backSwitch = 0;
    }


        const onClickOperator = (op) => () => {
            if (numberOne) {
                operator = op;
                $operator.value = op; // operator 변수값을 id=operator div 에 반영
            } else {
                alert('숫자를 먼저 입력하세요. OP');
            }
            numberTwo = '';
        }

        document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
        document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
        document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
        document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));


    document.querySelector('#calculate').addEventListener('click', () => {
        if (!operator) {
            alert('연산자를 입력하지 않았습니다.')
            document.querySelector('#titleBox').focus();
            return;
        }
        if (numberTwo) {
            switch (operator) {
                case '+':
                    $result.value = parseInt(numberOne) + parseInt(numberTwo);
                    numberOne = parseInt(numberOne) + parseInt(numberTwo);
                    break;
                case '-':
                    $result.value = numberOne - numberTwo;
                    numberOne = numberOne - numberTwo;
                    break;
                case '*':
                    $result.value = parseInt(numberOne) * parseInt(numberTwo);
                    numberOne = parseInt(numberOne) * parseInt(numberTwo);
                    break;
                case '/':
                    $result.value = numberOne / numberTwo;
                    numberOne = numberOne / numberTwo;
                    break;
                default:
                    break;
            }
        } else {
            alert('숫자를 먼저 입력하세요. calc')
        }
        resultCount = 1;
    });


    document.querySelector('#clear').addEventListener('click', () => {
        numberOne = '';
        numberTwo = '';
        operator = '';
        $operator.value = '';
        $result.value = '';
        resultCount = 0;
        document.querySelector('#titleBox').focus();
    });

</script>
</body>
</html>
'WEB' 카테고리의 다른 글

숫자 야구 게임 (0)	2023.09.21
병신같은 쿵쿵따 (0)	2023.09.14
HTML/CSS - NAVER 메인 따라 만들기 - 3. 최상단 버튼 생성 (0)	2023.08.31
HTML/CSS - NAVER 메인 따라 만들기 - 2.이미지 소스 추출 (0)	2023.08.31
HTML/CSS - NAVER 메인 따라 만들기 - 선엔딩, 소스코드 (0)	2023.08.31
'WEB' 카테고리의 다른 글

검색 태그

티스토리툴바
