오늘의 생각
시작하며/마치며
오늘은 목업 계산기에 생명력을 입히는 첫단추를 끼는 작업을 하였다.
코드스테이츠에서 마련한 js코드를 기반으로 계산기 로직을 구현하였다.
개발자의 실력 상승 그래프는 계단식이라고 하던데.. JavaScript가 정체기의 첫 단계인 것 같은 느낌이 확 든다..ㅠ
이 부분은 계속계속 뜯어봐야 익숙해 질 것 같은 세계다. ㅠ_ㅜ
계속 반복해서 익숙해지는 것이 목표닷!
오늘의 학습내용
1. HTML 코드
- 기본 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link rel="stylesheet" href="./yourStyle.css">
</head>
<body>
<div class="container">
<div class="calculator">
<div class="calculator__display--bare">
<span class="calculator__operend--left">0</span>
<span class="calculator__operator">+</span>
<span class="calculator__operend--right">0</span>
<span class="calculator__equal">=</span>
<span class="calculator__result">0</span>
</div>
<div class="calculator__display--for-advanced">0</div>
<div class="calculator__buttons">
<div class="clear__and__enter">
<button class="clear">AC</button>
<button class="calculate">Enter</button>
</div>
<div class="button__row">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">+</button>
</div>
<div class="button__row">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
</div>
<div class="button__row">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">*</button>
</div>
<div class="button__row">
<button class="number double">0</button>
<button class="decimal">.</button>
<button class="operator">/</button>
</div>
</div>
</div>
<img class="logo" src="data/codestates-logo.png">
</div>
<script src='./script.js'></script>
</body>
</html>
2. Javascript 코드
1) 연산 기능
function calculate(n1, operator, n2) {
let result = 0;
if(operator === '+'){
result = Number(n1) + Number(n2);
}
if(operator === '-'){
result = Number(n1) - Number(n2);
}
if(operator === '*'){
result = Number(n1) * Number(n2);
}
if(operator === '/'){
result = Number(n1)/Number(n2);
}
return String(result);
}
// 생략 ...
if (action === 'calculate') {
console.log('계산 버튼');
calculatedResult.textContent = calculate(firstOperend.textContent, operator.textContent, secondOperend.textContent);
}2) 숫자 이어붙여서 출력
if (action === 'number') {
if (display.textContent === '0' || previousKey === 'operator' || previousKey === 'calculate') {
display.textContent = buttonContent;
} else {
display.textContent = display.textContent + buttonContent;
}
previousKey = 'number';
}- 연산자 버튼을 클릭했을 시 calculate 함수를 실행하고, firsNum, operatorForAdvanced, previousKey에 입력했던 값을 할당한다.
if (action === 'operator') {
if(firstNum && operatorForAdvanced && previousKey !== 'calculate' && previousKey !== 'operator') {
display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
}
firstNum = display.textContent;
operatorForAdvanced = buttonContent;
previousKey = 'operator';
}3) ' . ' 입력 시 소수점 구현하기
' . '이 입력값에 포함되었을 때 화면에 ' . ' 을 출력하고, 이전에 입력한 값이 연산자면 ' 0. ' + 를
출력한다.
if (action === 'decimal') {
if(!(display.textContent.includes('.'))) {
display.textContent = display.textContent + '.';
}
if(previousKey === 'operator'){
display.textContent = '0.'
}
previousKey = 'decimal';
}4) 리셋버튼 클릭 시 값 초기화하기
if (action === 'clear') {
firstNum = undefined;
operatorForAdvanced = undefined;
previousKey = undefined;
previousNum = undefined;
display.textContent = '0'
}5) 엔터 버튼 클릭 시 계산기능 구현
첫 번째 입력값이 있을 때, 이전 입력값이 엔터값이면 디스플레이에 계산값을 띄운다.
이전 입력값이 엔터값이 아니면 previousNum에 display값을 할당하고 디스플레이에 firstNum과 previousNum을 연산자로 계산한 값을 띄운다.
if (action === 'calculate') {
if(firstNum){
if(previousKey === 'calculate'){
display.textContent = calculate(display.textContent, operatorForAdvanced, previousNum);
} else {
previousNum = display.textContent;
display.textContent = calculate(firstNum, operatorForAdvanced, previousNum);
}
previousKey = 'calculate';
firstNum = display.textContent;
}
}
새싹 개발자 지렁이의 벨로그입니다.