계산기 Nightmare & Advanced Challenges
이전 과제는 간단한 과제였다면 이번에는 계산기를 좀더 정교하게 만드는 과정이었다.
목표
1. parseFloat을 사용하여 실수 계산도 가능 하도록 만들어 주었다.
2. 계산기의 버튼만 클릭해서 동작하는 방식이 아니라, 키보드로도 작동이 되도록 만들어 주었다.
3. 계산기만 있는것은 허전해 보여서 미디어쿼리를 사용하여 애플 로고에 애니메이션 효과를 주었다.
index.html
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">
<link rel="stylesheet" href="style.css">
<title>calculator</title>
</head>
<body>
<div class="container">
<img class="image blinking" src="apple-logo.jpeg" alt="apple">
<div class="calc">
<div class="calculator_display">
<div class="displayOne">0</div>
<div class="displayTwo">0</div>
<div class="result">0</div>
</div>
<button class="bt clear">AC</button>
<button class="bt operation">±</button>
<button class="bt operation">%</button>
<button class="bt operation">÷</button>
<button class="bt number">7</button>
<button class="bt number">8</button>
<button class="bt number">9</button>
<button class="bt operation">×</button>
<button class="bt number">4</button>
<button class="bt number">5</button>
<button class="bt number">6</button>
<button class="bt operation">−</button>
<button class="bt number">1</button>
<button class="bt number">2</button>
<button class="bt number">3</button>
<button class="bt operation">+</button>
<button class="bt number">0</button>
<button class="bt number">.</button>
<button class="bt equal">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>script.js
먼저 querySelector로 클래스 이름을 조회하여 변수에 할당을 해 주었다.
const display1 = document.querySelector(".displayOne");
const display2 = document.querySelector(".displayTwo");
const resultE = document.querySelector(".result");
const numbersE = document.querySelectorAll(".number");
const operationE = document.querySelectorAll(".operation");
const equalE = document.querySelector(".equal");
const clearAllE = document.querySelector(".clear");그리고 출력, 기호를 담을 변수와 중복체크를 하기위한 변수를 설정해 주었다.
let disOne = "";
let disTwo = "";
let result = null;
let operations = "";
let duplicateCheck = false;그 다음 .의 중복체크 부분을 만들어 주었고, 클릭한 숫자값 변수에 넣고 변수 값을 출력하는 부분을 만들어 주었다.
numbersE.forEach(number =>{
number.addEventListener("click", (el)=>{
if(el.target.innerText === "." && !duplicateCheck){
duplicateCheck = true;
}else if(el.target.innerText === "." && duplicateCheck){
return;
}
disTwo += el.target.innerText;
display2.innerText = disTwo;
})
})
그리고 연산자 클릭 이벤트를 만들어 주었다.
operationE.forEach(operation => {
operation.addEventListener("click", (el)=>{
if(!disTwo){
return;
}
duplicateCheck = false;
const operationSymbol = el.target.innerText;
if(disOne && disTwo && operations){
mathOperation();
}
else {
result = parseFloat(disTwo);
}
clearVar(operationSymbol);
operations = operationSymbol;
})
})모든 값이 들어가 있을 때 각 기호가 들어 올때 계산 결과를 출력하도록 만들어 주었다.
function mathOperation() {
if(operations === "×") {
result = parseFloat(result) * parseFloat(disTwo);
} else if(operations === "+") {
result = parseFloat(result) + parseFloat(disTwo);
} else if(operations === "−") {
result = parseFloat(result) - parseFloat(disTwo);
} else if(operations === "%") {
result = parseFloat(result) % parseFloat(disTwo);
} else if(operations === "÷") {
result = parseFloat(result) / parseFloat(disTwo);
}
}function clearVar(symbol = "") {
disOne += `${disTwo} ${symbol} `;
display1.innerText = disOne;
display2.innerText = "";
disTwo = "";
resultE.innerText = result;
}첫번째값이나 두번째값이 없는 경우는 못하도록 해주었고, 둘다 값이 있으면 계산을 해 주도록했다.
equalE.addEventListener("click", (e) => {
if(!disOne || !disTwo) {
return;
}
duplicateCheck = false;
mathOperation();
clearVar();
display2.innerText = result;
resultE.innerText = "";
disTwo = result;
disOne = "";
})모든 값을 초기화 되도록 만들어 주었다.
clearAllE.addEventListener("click", (e) => {
display1.innerText = "0";
display2.innerText = "0";
disOne = "";
disTwo = "";
result = "";
resultE.innerText = "0";
duplicateCheck = false;
})키보드로도 계산이 되도록 만들어 주었다.
keyfress나 keydown을 사용할 수 있는데 keyfress는 오래된 property라 권장하지 않는다고 하니
가능하면 keydown을 사용하자.
window.addEventListener("keydown", (e) => {
if(
e.key === "0" ||
e.key === "1" ||
e.key === "2" ||
e.key === "3" ||
e.key === "4" ||
e.key === "5" ||
e.key === "6" ||
e.key === "7" ||
e.key === "8" ||
e.key === "9" ||
e.key === "."
) {
clickButtonEl(e.key);
} else if(
e.key === "+" ||
e.key === "/" ||
e.key === "%"
) {
clickOperation(e.key);
} else if(e.key === "*") {
clickOperation("×");
} else if(e.key === "-") {
clickOperation("−");
} else if(e.key === "?") {
clickOperation("÷");
} else if(e.key === "Enter" || e.key === "=") {
ClickEqual();
}
});
function clickButtonEl(key) {
numbersE.forEach(bt => {
if(bt.innerText === key) {
bt.click();
}
})
};
function clickOperation(key) {
operationE.forEach(bt => {
if(bt.innerText === key) {
bt.click();
}
})
};
function ClickEqual() {
equalE.click();
};style.css
css부분에는 이미지 로고가 블링크 되도록 이렇게 넣어 주었다.
화면이 작으면 계산기랑 겹쳐 보일 수도 있다.
.blinking{
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
-moz-animation:blink 1.5s ease-in-out infinite alternate;
animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
정리
역시 아직까지는 익숙해질 필요가 있어 보인다.
인터넷에서 정보를 찾아서 하여 괜찮았지만, 나의 것으로 만들기 위해 좀더 열심히 공부해야겠다.
