CALCULATOR
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basics</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor.js" defer></script>
<script src="js/app.js" defer></script>
</head>
<body>
<header>
<h1>The Calculator</h1>
</header>
<section class="card" id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section class="card" id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
<section class="card" id="logs">
<ul class="log-entries"></ul>
</section>
</body>
</html>- vendor.js에서 정의하고 app.js에서 실행하므로 vendor.js를 먼저 씀
app.js
- 실행 코드를 작성
// 실행코드 (함수 호출, 이벤트등록 ..., 핸들러 정의)
// 이벤트 핸들러 바인딩
$addBtn.addEventListener('click', (e) => {
// 연산 처리 함수
calculate(e);
});
$subtractBtn.addEventListener('click', (e) => {
// 연산 처리 함수
calculate(e);
});
$multiplyBtn.addEventListener('click', (e) => {
// 연산 처리 함수
calculate(e);
});
$divideBtn.addEventListener('click', (e) => {
// 연산 처리 함수
calculate(e);
});vendor.js
- 변수, 함수를 정의
// 프로그램 전체에서 사용할 전역적인 변수와 함수를 정의 (실행 코드 XXXXXXXXX)
const $userInput = document.getElementById('input-number');
const $addBtn = document.getElementById('btn-add');
const $subtractBtn = document.getElementById('btn-subtract');
const $multiplyBtn = document.getElementById('btn-multiply');
const $divideBtn = document.getElementById('btn-divide');
// result 요소노드
const $currentResult = document.getElementById('current-result');
// 계산 로그 요소노드
const $currentCalculation = document.getElementById('current-calculation');
// result에 그려질 숫자
let currentResult = 0;
// 현재 기호
let currentSign = "";
// 문제 번호
let count = 1;
//============== 함수 정의 영역 ===============//
// 계산 기능 헬퍼 함수
const calculate = (e) => {
// 타겟
const target = e.target;
// 계산 전 값을 백업
const prevResult = currentResult;
// 1. 입력창에 입력한 숫자를 읽어와야 함.
const enteredNumber = +$userInput.value;
// 2. 기호에 따른 결과를 누적
if (target.textContent === $addBtn.textContent) {
currentResult += enteredNumber;
currentSign = "+"
} else if (target.textContent === $subtractBtn.textContent){
currentResult -= enteredNumber;
currentSign = "-"
} else if (target.textContent === $multiplyBtn.textContent){
currentResult *= enteredNumber;
currentSign = "*"
} else {
currentResult /= enteredNumber;
currentSign = "/"
}
// 3. 화면에 렌더링
$currentResult.textContent = currentResult;
// 계산 로그 생성
const descriptionLog = `${prevResult} ${currentSign} ${enteredNumber}`;
$currentCalculation.textContent = descriptionLog;
// 4. 계산했던 결과들 기록남기기
const $ul = document.querySelector(".log-entries");
const $newLi = document.createElement('li');
$ul.appendChild($newLi);
$newLi.classList.add('log-entries__item');
$newLi.innerHTML += `${count}. ${$currentCalculation.textContent} = ${$currentResult.textContent}`;
count++;
};
백엔드 개발자