'계산기 만들기' 토이 프로젝트(1)

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

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

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

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>

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;
}

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;
  }
}

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