Experience/[Javascript] Calculator
[Javascript] Calculator ②Display Process
winCow
2021. 4. 25. 18:03
본격적으로 계산기의 기능들을 만들어 보려고 한다. 계산기의 가장 기본적인 기능 두 가지는, 숫자를 화면에 표시하는 기능과 계산을 수행하는 기능이다. 먼저 숫자를 process 화면에 숫자를 표시하는 기능을 만들었다.
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
</head>
<body>
<!-- Moniter -->
<div class="moniter">
<div class="process">process</div>
<div class="preview">result preview</div>
</div>
<!-- keyPad -->
<div class="keysContainer">
<div class="keys"><input class="cancel" type="button" value="C"></div>
<div class="keys"><input class="keyButtons bracket" type="button" value="( )"></div>
<div class="keys"><input class="keyButtons percent" type="button" value="%"> </div>
<div class="keys"><input class="keyButtons divide" type="button" value="÷"> </div>
<div class="keys"><input class="keyButtons" type="button" value="7"> </div>
<div class="keys"><input class="keyButtons" type="button" value="8"> </div>
<div class="keys"><input class="keyButtons" type="button" value="9"> </div>
<div class="keys"><input class="keyButtons multiply" type="button" value="×"> </div>
<div class="keys"><input class="keyButtons" type="button" value="4"> </div>
<div class="keys"><input class="keyButtons" type="button" value="5"> </div>
<div class="keys"><input class="keyButtons" type="button" value="6"> </div>
<div class="keys"><input class="keyButtons minus" type="button" value="-"> </div>
<div class="keys"><input class="keyButtons" type="button" value="1"> </div>
<div class="keys"><input class="keyButtons" type="button" value="2"> </div>
<div class="keys"><input class="keyButtons" type="button" value="3"> </div>
<div class="keys"><input class="keyButtons plus" type="button" value="+"> </div>
<div class="keys"><input class="keyButtons positiveOrNegative" type="button" value="+/-"> </div>
<div class="keys"><input class="keyButtons" type="button" value="0"> </div>
<div class="keys"><input class="keyButtons" type="button" value="."> </div>
<div class="keys"><input class="equal" type="button" value="="> </div>
</div>
</body>
<script src="main.js"></script>
</html>input 버튼에 기능별로 클래스를 추가해야 될지도 모르겠다.
2. CSS
:root{
--background-color: #576574;
--background-width-size: 320px;
--background-height-size: 120px;
--key-color: #1dd1a1;
--contents-width-size: 50px;
--contents-height-size: 50px;
--margin-padding-size: 10px;
--font-size: 20px;
}
body {
margin: 0;
}
* {
font-family: 'Zen Dots', cursive;
}
/* moniter */
.moniter {
background-color: var(--background-color);
width: var(--background-width-size);
height: var(--background-height-size);
margin: var(--margin-padding-size);
border-radius: var(--margin-padding-size);
display: flex;
flex-direction: column;
}
.process {
background-color: var(--key-color);
width: calc(var(--contents-width-size) * 6 - var(--margin-padding-size) * 2);
height: calc(var(--contents-height-size) * 1.5);
margin: var(--margin-padding-size) var(--margin-padding-size) 0 var(--margin-padding-size);
border-radius: var(--margin-padding-size);
font-size: calc(var(--font-size) * 2);
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: calc(var(--margin-padding-size) * 2);
}
.preview {
background-color: var(--key-color);
width: calc(var(--contents-width-size) * 6 - var(--margin-padding-size) * 2);
height: calc(var(--contents-height-size) * 0.5);
margin: var(--margin-padding-size);
border-radius: var(--margin-padding-size);
font-size: calc(var(--font-size) * 0.6);
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: calc(var(--margin-padding-size) * 2);
}
/* keypad */
.keysContainer {
background-color: var(--background-color);
width: var(--background-width-size);
height: calc(var(--background-height-size) * 3);
border-radius: var(--margin-padding-size);
margin: var(--margin-padding-size);
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.keyButtons, .cancel, .equal {
background-color: var(--key-color);
width: calc(var(--contents-width-size) * 1.2);
height: calc(var(--contents-height-size) * 1.2);
margin: calc(var(--margin-padding-size) * 0.5);
border-radius: var(--margin-padding-size);
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size);
}
3. Javascript - Display Process
const inputs = document.querySelectorAll('.keyButtons');
let givenKeys = [];
function displayProcess(e) {
const process = document.querySelector('.process');
givenKeys.push(this.value);
givenKeys.splice(-8, givenKeys.length - 7);
process.textContent = givenKeys.join('');
}
inputs.forEach(input => input.addEventListener('click', displayProcess));inputs 변수에, =과 C를 제외한 모든 input 태그를 할당하고, givenKey라는 빈 배열을 재할당이 가능한 전역변수로 설정하였다. 모든 input에 대해, 클릭 이벤트가 전달되면 displayProcess 함수를 실행하는 이벤트 리스너를 설정했다. displayProcess 함수는 process클래스를 가진 html의 div 태그를 선택하여 process 변수에 할당하고, 클릭 이벤트로부터 전달된 input태그의 value를 push 매소드를 통해 givenKeys 배열에 추가한다. 이 배열은 최대 7글자까지만 표시하기 위하여 splice API를 이용해 뒤에서부터 세었을 때 8번째 글자부터 마지막 글자까지를 삭제하도록 하였다. 이렇게 해서 수정된 배열 givenkeys에 join('') API로 숫자가 구분되지 않고 연속적으로 표시되도록 한 뒤에, textContent를 이용해 process 화면에 입력되도록 하였다. 이를 통해 마지막으로 누른 7 개의 문자만이 화면에 표시된다.
4. Javascript - Calculate
계산 기능은, NaN, 즉 연산자가 입력되는 경우, 지금까지 저장되었던 givenKeys 값과 앞으로 입력될 값들에 대해 각 연산자에 따른 기능을 부여하도록 하려고 한다.