당일회고& 복습
오늘은 일본에서의 코딩 공부,,,, 여행와서 삼일이나 빠지는 건 너무 심적으로 부담이 될거 같아서
일본에서의 피같은 시간이지만 하루를 공부하는데에 투자했다.
오늘은 이전에 만들었던 계산기를 실제로 사용이가능하게 구현하는 시간이었다.
첫번째 수를 입력하고 연산자를 어떤걸 쓸지를 정해두고 두번째 수를 받을때에 어려움을 겪었다.
첫번째 수와 연산자를 변수에 저장해두고 두번째 수를 받을땐 첫번째 수에 연결되어 숫자가 나오면 안되고 두번째 수의 숫자들만 나오게 하는게 어려웠다!
const calculator = document.querySelector('.calculator'); // calculator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const buttons = calculator.querySelector('.calculator__buttons'); // calculator__keys 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const firstOperend = document.querySelector('.calculator__operend--left'); // calculator__operend--left 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const operator = document.querySelector('.calculator__operator'); // calculator__operator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const secondOperend = document.querySelector('.calculator__operend--right'); // calculator__operend--right 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const calculatedResult = document.querySelector('.calculator__result'); // calculator__result 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
function calculate(n1, operator, n2) {
console.log(n1,n2)
let result = 0;
// TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
// ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
if(operator === '+') {
result = Number(n1) + Number(n2);
}
else if (operator === '-') {
result = Number(n1) - Number(n2);
}
else if (operator === '*') {
result = Number(n1) * Number(n2);
}
else if (operator === '/') {
result = Number(n1) / Number(n2);
}
return String(result);
}
const display = document.querySelector('.calculator__display--for-advanced'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
let firstNum, operatorForAdvanced, previousKey, previousNum;
buttons.addEventListener('click', function (event) {
// 버튼을 눌렀을 때 작동하는 함수입니다.
const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
// ! 위 코드는 수정하지 마세요.
// ! 여기서부터 Advanced Challenge & Nightmare 과제룰 풀어주세요.
if (target.matches('button')) {
if (action === 'number') {
if(display.textContent ==='0') {
display.textContent = buttonContent;
}
else if (display.textContent !== '0' && operatorForAdvanced ===undefined) {
display.textContent = firstNum + buttonContent;
firstNum =display.textContent;
}
else if (operatorForAdvanced !== undefined) {
if (previousKey ===operatorForAdvanced){
display.textContent = buttonContent;
previousKey = display.textContent;
previousNum =display.textContent;
}
else if (previousKey !== operatorForAdvanced) {
display.textContent = display.textContent + buttonContent;
previousNum = display.textContent;
}
}
}
if (action === 'operator') {
operatorForAdvanced = buttonContent;
previousKey = operatorForAdvanced;
}
if (action === 'decimal') {}
if (action === 'clear') {
firstNum ='0';
operatorForAdvanced = undefined;
previousNum ='0';
display.textContent ='0'
}
if (action === 'calculate') {
display.textContent = calculate(firstNum,operatorForAdvanced,previousNum);
}
}
});js 파일이 아주 길다 ㅎ
첫번째 수는 firstName 에 저장해두고 연산자는 operatoForAdvanced 에 저장하고
두번째 수를 받기 위해선 previousKey = operatoForAdvanced 에 할당해준다.
숫자가 적히는 경우 알아보기
1. 계산기에 0이 적혀있는 경우 --> 첫번째 수 입력(한자리 숫자) (ex-1)
2. 계산기에 0말고 다른 수가 적혀있고 - 저장되어 있는 연산자가 없는경우 ---> 첫번째 수가 한자리 숫자가 아닌경우(ex-12345) firstName 에 저장
3. 연산자가 저장되어 있는 경우에는 또 두가지로 나뉜다. previousKey = operatoForAdvanced 에 할당해준이유도 여기 있다.
3-1 previousKey === operatoForAdvanced 인경우 ---> 두번째 수 입력(한자리 숫자) 후 previousKey 에 두번째 수(한자리 숫자) 저장(why? - 하나의 경우의 수를 더 만들기 위해) (ex-1)
3-2 previousKey !== operatoForAdvanced 인경우 ---> 위에 previousKey에 숫자를 저장시켜놓았기 때문에 더이상 previousKey와 operatoForAdvanced 는 같지 않다. 이경우에 두번째 수가 한자리 숫자가 아닌경우 (ex-12345) 나온 숫자를 previousNum 에 저장
연산함수 function calculate(n1, operator, n2) {} 작성하는 방법은 연산 하나마다 하나의 식을 만들어 놓고 계산기에 보여지는 숫자는 문자열이므로 숫자로 변경해줘 값을 구한 뒤 다시 문자열로 변환시켜 출력시켜주면 된다!
