본문 바로가기
Programming/JavaScript

'계산기 만들기' 토이 프로젝트(1) - [Javascript 입문 _14]

by Muko 2020. 5. 29.

이번 시간에는 프로그래밍을 배우면서, 특히 자바스크립트를 배우면서 많이 시도하게 되는 계산기 프로젝트를 진행해보려고 합니다. 제가 만들고자 하는 계산기는 Mac 에서 사용되는 계산기의 디자인을 본따서 만들었습니다.

프로젝트를 진행하기 위해서는 우선 프로젝트 생성 및 파일 생성, 실행 방법을 알고 있어야 겠죠? 한 번도 프로젝트를 해보신 적이 없는 분들은 자바스크립트 입문 - 첫 번째 프로젝트 '클리커게임' 포스팅을 참고해주세요!

이번 프로젝트에서도 총 세 개의 파일이 필요합니다.
프로젝트를 생성한 다음에 index.html, calculator.css, calculator.js 이렇게 세 개의 파일을 생성해주세요. 지금은 javascript를 익히는 시간이기 때문에, 눈에 보이는 부분을 구현하지는 않겠습니다. 아래 코드를 그대로 복붙 해주세요!

  1. index.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./calculator.css">
        <title>My Calculator</title>
    </head>
    <body>
        <div class="container">
            <div class="calculator">
                <div class="displayBoard">
                    <div class="result">
                        0
                    </div>
                </div>
                <div class="numberBoard">
                    <div class="row">
                        <div class="col subBtn" onClick="handleCalculator(event)"><div class="inner">C</div></div>
                        <div class="col subBtn" onClick="handleCalculator(event)"><div class="inner">±</div></div>
                        <div class="col subBtn" onClick="handleCalculator(event)"><div class="inner">%</div></div>
                        <div class="col operator" onClick="handleCalculator(event)"><div class="inner">÷</div></div>
                    </div>
                    <div class="row">
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">7</div></div>
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">8</div></div>
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">9</div></div>
                        <div class="col operator" onClick="handleCalculator(event)"><div class="inner">×</div></div>
                    </div>
                    <div class="row">
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">4</div></div>
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">5</div></div>
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">6</div></div>
                        <div class="col operator" onClick="handleCalculator(event)"><div class="inner">-</div></div>
                    </div>
                    <div class="row">
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">1</div></div>
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">2</div></div>
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">3</div></div>
                        <div class="col operator" onClick="handleCalculator(event)"><div class="inner">+</div></div>
                    </div>
                    <div class="row">
                        <div class="col2 numberBtn" onClick="handleCalculator(event)"><div class="inner">0</div></div>
                        <div class="col numberBtn" onClick="handleCalculator(event)"><div class="inner">.</div></div>
                        <div class="col operator" onClick="handleCalculator(event)"><div class="inner">=</div></div>
                    </div>
                </div>
            </div>
        </div>
        <script src="./calculator.js"></script>
    </body>
    </html>

 

  1. calculator.css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.container .calculator {
    width: 340px;
    height: 550px;
    background-color: #444;
    color: white;
    font-weight: bold;
    font-size: 2.1rem;
}

.container .calculator .displayBoard {
    position: relative;
    height: 150px;
}

.container .calculator .displayBoard .result {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 30px 5px 0;
}

.container .calculator .numberBoard {
    width: 100%;
    height: 400px;
}

.container .calculator .numberBoard .row {
    display: flex;
    flex-flow: wrap;
    height: 80px;
}

.container .calculator .numberBoard .row .btn {
    cursor: pointer;
}

.container .calculator .numberBoard .row .col {
    flex-basis: 25%;
    cursor: pointer;
}

.col > .inner, .col2 > .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #444;
    height: 78px;
}

.container .calculator .numberBoard .row .col2 {
    flex-basis: 50%;
    cursor: pointer;
}

.container .calculator .numberBoard .subBtn {
    background-color: #555;
}

.container .calculator .numberBoard .subBtn:active {
    background-color: #777;
}

.container .calculator .numberBoard .numberBtn {
    background-color: #777;
}

.container .calculator .numberBoard .numberBtn:active {
    background-color: #aaa;
}

.container .calculator .numberBoard .operator {
    background-color: #ffa500;
}

.container .calculator .numberBoard .operator:active {
    background-color: #dd8500;
}

 

  1. calculator.js
    const handleCalculator = (event) => {
     switch (event.target.innerHTML) {
         case '0':
         case '1':
         case '2':
         case '3':
         case '4':
         case '5':
         case '6':
         case '7':
         case '8':
         case '9':
             alert(event.target.innerHTML);
             break;
         case 'C':
         case '±':
         case '%':
         case '÷':
         case '×':
         case '-':
         case '+':
         case '.':
         case '=':
             alert(event.target.innerHTML);
             break;
     }
    }

이 코드를 무사히 가져간 다음 실행히켰다면 다음과 같은 결과를 확인하실 수 있습니다.

정상적으로 동작하는지 확인하셨나요~?

이번에 만드는 계산기에 들어가는 기능은 다음과 같습니다.

  • 숫자 입력
  • 소수점 입력
  • 사칙연산
  • 나머지 연산
  • 부호 반전
  • 백분율 계산
  • 계산 초기화
  • 결과 계산 후 출력

총 7가지 기능을 구현해야 하네요. 물론 큰 기능은 7가지 이지만, 세세한 것까지 구현한다고 생각하면 생각보다 많은 것을 구현해야 합니다.
이에 대해서는 다음 포스팅에서 이어서 작성하도록 하겠습니다.

댓글0