[CSS, JS] 계산기에 기능 추가하기!

🔥 우선 최종적 완성본이다. 나이트메어는 못하겠다~~~ㅜ 지금도 최선을 다했다?!

🗣 그냥 막 사용하는 계산기의 로직이 이렇게 복잡할 줄은 몰랐다ㅎㅎ 역시 쉬운건 없다~

😵‍💫  오늘은 이렇게 일단락이 되었지만 ,,, 다시 내일을 위해 달려보자고! 깃과 노드에 맛보기 일 듯? 하다

html은 그대로 가져가고,

css에서 버튼의 border-bottom 추가와?? 아래 active 추가를 해주었다.

클릭시 효과를 나타낸다!

 

CSS,,

.clear__and__enter > button:active {
  box-shadow: 1px 1px 0 rgba(77, 234, 137, 0.5);
  position: relative;
  top:2px;
}

button:active {
  color: #ffffff;
  font-size: 20px;
  box-shadow: 1px 1px 0 rgba(77, 234, 137, 0.5);
  position: relative;
  top:2px;
  border-bottom: none;
}

.operator:active {
  color:#440d77
}

그리고그리고!!

 

JS,,

const calculator = document.querySelector(".calculator");
const buttons = calculator.querySelector(".calculator__buttons");
const operator = document.querySelector(".calculator__operator");
const display = document.querySelector(".calculator__display--for-advanced");

let firstNum, operatorForAdvanced, previousKey, previousNum;

// n1과 n2 -> operator
let calculate = (n1, operator, n2) => {
  let result = 0;

  if (operator === "+") {
    result = parseInt(n1) + parseInt(n2); // '+'버튼을 눌렀을 때
  } else if (operator === "-") {
    result = parseInt(n1) - parseInt(n2); // '-'버튼을 눌렀을 때
  } else if (operator === "*") {
    result = parseInt(n1) * parseInt(n2); // '*'버튼을 눌렀을 때
  } else if (operator === "/") {
    result = parseInt(n1) / parseInt(n2); // '/'버튼을 눌렀을 때
  }
  return String(result);
};

// 버튼을 눌렀을 때 작동하는 함수
buttons.addEventListener("click", (event) => {
  const target = event.target; // 클릭된 HTML 엘리먼트의 정보

  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보

  if (target.matches("button")) {
    if (action === "number") {
      //  0을 나타내거나? previousKey에 연산자가 있다면? 그것하나 만 표시
      if (display.textContent === "0" || previousKey === "operator") {
        // console.log('숫자 ' + buttonContent + ' 버튼');
        display.textContent = buttonContent;
      } else {
        display.textContent += buttonContent;
      }
      // key에 number를 할당,,, 이걸 안해서 두번째 숫자에 쌓이지 않았다ㅠㅠ
      previousKey = "number";
    }

    if (action === "operator") {
      // firstNum에 처음 값을 저장
      firstNum = display.textContent;
      // display.textContent = Number(0);
      // 변수 operatorForAdvanced에 버튼의 컨텐츠(연산자 기호)를 할당 후 (나중 calculate에서 쓰일 꺼임 연산자)
      operatorForAdvanced = buttonContent;
      // key에 연산자 할당
      previousKey = "operator";
    }

    if (action === "clear") {
      display.textContent = "0"; // 화면은 0 할당
      // 변수에 특정 값 할당하는 초기화 미 진행시, undefined로 초기화 가능
      firstNum = undefined;
      operatorForAdvanced = undefined;
      previousKey = undefined;
      previousNum = undefined;
    }

    if (action === "calculate") {
      console.log("계산 버튼");
      // 계산기의 화면에 calculate 함수의 결과를 출력합니다.
      previousNum = display.textContent;
      display.textContent = calculate(
        firstNum,
        operatorForAdvanced,
        previousNum
      );
      previousKey = "calculate";
    }
  }
});

test.script는 통과했다!

하지만,, 마음에 안드는게

  if (target.matches('button')) {
    if (action === 'number') {
      if (display.textContent === '0' || previousKey === 'operator') {
        display.textContent = buttonContent;
      } 
      else {
        display.textContent += buttonContent;
      }
    }

여기서

if (display.textContent === '0' || previousKey === 'operator') {
        display.textContent = buttonContent;
} 

이렇게 되면 0 표시가 될 때는 0을 누를때 변하지 않게 0을 할당 한다,

하지만 연산자를 누른 후 두번째 숫자를 누를때

previousKey에 연산자가 할당이 되었기에,?

두번째 숫자 넣는칸에는 하나씩 밖에 할당되지 않는다… ㅜ 어떻게 해결해야할까….?

 

 📌 진짜,, 다 넣어 놓고 넘버만 왜 이전키에 할당을 안했까?!,,, 바보 같다 위 스크립트에는 수정 완료!!

// key에 number를 할당,,, 이걸 안해서 두번째 숫자에 쌓이지 않았다ㅠㅠ
      previousKey = 'number'

 

 

과제 제출👍🏻

제시된 git 에서 fork 해온다. (내 repository 에 복제)

파일 수정 후

수정한 파일을 add file 로 업로드 한다

그리고 pull request 한다 (나중 업무 볼 때 여럿사람이 같이 활용하기에, 항상 잘 구분이 가도록 명칭쓰자!)