🏁 계산기 만들기(3/3)

🏁 계산기 만들기(3)

실제 계산기가 구동되는 것처럼 만들기!!
계산기,,, 너 이렇게 어렵고 힘들게 사는 아이였구나,,
나 너무 쉽게 쓰고 있었어,, 미안🥺🥺

계산 파일 만들기

🤔 작업한 html 파일 하단에 script 추가하기

<script type="text/javascript" src="src/script.js"></script>

querySelector로 필요한 애들 선택하기

🤔 .calculator 랑 .calculator 안에 .btn 선택하고, current-display 랑 current-history 랑 이전 계산내역 영역 선택하기

const calculator = document.querySelector('.calculator');
const buttons = calculator.querySelector('.btn');

const display = document.querySelector(".current-display");
const current_display = document.querySelector(".current-history");
const old_display = document.querySelector(".history");

계산하는 함수 만들기

🤔 계산하는 함수만들기

function calculate(n1, operator, n2) {
  let result = 0;  
  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 calculate = (n1, operator, n2) => {
  let result = 0;
  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);
}

😭 나으 실수

+, -, x, / 를 아무리 해도 안된다.. 왜 안되지? 하고 생각해보니
내가 애초에 계산하는 함수를 만들 때 operator 를 이상한 특수문자로 지정해놓고 키보드에 있는 x나 / 이런걸 넣고 있었다..
진짜 너무 멍청한 실수.. 하지말쟈

입력한 키들 기억하기

firstNum, previousKey, previousNum 등 변수를 지정하고

const display = document.querySelector(".current-display"); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const current_display = document.querySelector(".current-history");
const old_display = document.querySelector(".history");

buttons.addEventListener('click', function(event) {
  const target = event.target; // 클릭된 html 엘리먼트의 정보 저장
  const action = target.classList[0] // 클릭된 html 엘리먼트의 클래스 정보 가져오기
  const buttonContent = target.textContent; // 클릭된 html 엘리먼트의 텍스트 정보 가져오기 // 얘로 입력한 키 기억하기
  
  if (target.matches("button")) { // 주어진 선택자나 요소와 일치하는지 여부 확인하기 //target 요소가 <button> 인지 확인해 일치하면 true 반환
    if(action === "number") {
      if(display.textContent === "0") { // display의 text 가 0이면?
        // display.textContent = buttonContent; 로 하고
        // current_display 에 클릭한 number 버튼 보이게하고
        // currentHIstory 에 현재 current_display값 저장하기
      } else if(previousKey === "operator") { // 이전의 키가 연산자면?
        // display.textContent = buttonContent; 로 하고
        // 만약 이전 키가 operator라면. current_display 에 클릭한 number 값을 추가하고
        // currentHistory 에 현재 current_display 값 저장
      }
	previousKey = "number";
    }
    
    if(action === "operator") { // class 정보가 operator면?
      // number 면 처럼 경우의 수 계산하기
    }
    
    if(action === "decimal") { // class 정보가 decimal(소수점) 이면?
      if (display.textContent.includes(".") === false) { // . 의 특정문자열(includes) 이 없다면
        display.textContent = display.textContent + ".";
      } // . 추가하기
    }
    
    if(action === "clear") { // class 정보가 clear 면?
      // display, current_display 0으로 만들어주고
      // previousKey 는 clear 로 바꿔주고
      // 그 외에 해야되는 것들 추가하기
    }
    
    if(action === "calculate") {
      
    }
    
    
  }
})

엔터,, 연속으로 안 누를게😭😭

엔터 연속으로 누르면 먼저 눌렀던 숫자가 더해지고,
= 이 계속 추가된다.
이거는.. 추후에 수정해봐야겠다. 당장 진도 너무 힘들어..ㅠㅡㅠ

---

업데이트하기

git에 올리기

이전에 git은 생성 후 올린줄 알았는데 올리지 않았었다;
생성한 git에 올리기 시작

• git init
• git remote add origin https://내 깃헙 URL
• git add
• git commit -m ":tada: Begin : 이전 계산기"

그러고 git push origin 하는데 안되고, git push main 하는데 안됨 ⇒ fatal: The current branch main has no upstream branch. 현재 브랜치(main)가 원격 저장소에 연결된 브랜치 없음을 나타내는 오류를 나타내는데 ⇒ 원격 저장소에 해당 브랜치가 없거나 원격 저장소에 해당 브랜치를 푸시하기 전에 로컬에서 해당 브랜치를 먼저 생성하지 않은 경우 발생한다고 한다.

• git push --set-upstream origin main ⇒ 현재 브랜치(main)을 원격 저장소(origin)의 upstream 브랜치로 푸시한다. ⇒ 푸시를 수행하고 동시에 upstream 브랜치로 설정한다는 뜻
• git push origin main 으로 원격 저장소에 푸시 성공
  
  

변수명 수정하기

계산기에서 못했던 것들을 추가로 수정하려고 하는데
변수명들이 명확하지 않아서 뜯어보는데 한참걸렸다..
그래서 변수명들 명확하게 수정하기

우선 html에 작성한 class 이름과 동일하게 맞추자
currentDisplay : current-display
currentHistory : current-history
operatorBtn : operatorForAdvanced

그리고 그 외의 변수명들은 알기 쉽게 수정하자
operateHistoryDiv (계산된 기록의 div 묶음) : history class명을 가진 div
clickHistory : 이전에 클릭한 버튼(기존의 currentHistory)
historySpan : history div 안에 생성될 span
historySpans : history div 안에 생성될 span 들!

계산한 내역 기억하기

🤔 내가 계산했던 내역들을 기억하게 해야돼!!!!

...
const historySpan = document.createElement("span");
historySpan.classList.add("old-history");
...

if(action === "calculate") {
  ...
  
  // 만약 operatorBtn이 있고 previousKey가 calculate면?
  if (operatorBtn && previousKey === "calculate") {
    //historySpan의 내용은 clickHistory 에 공백 추가하고 계산 결과값 추가하기
    historySpan.textContent = clickHistory + " " + currentDisplay.textContent;
    // operateHistory에 appendChild() 사용해서 historySpan 추가
    operateHistory.appendChild(historySpan);
    oldDisplay = operateHistory.textContent;
  }

}

historySpan 을 currentDisplay 변수 아래에 뒀을 때 계속 한개만 생성됐다.

도대체 왜?? 하면서 찾아보니
내가 변수의 위치를 잘못 지정한 것!
한 번만 생성된 이유는 이벤트 리스너 외부에 위치해 있기 때문(페이지 로드 시에만 실행되고, buttons.addEventListener 의 콜백 함수가 실행될 때마다 재실행되지 않음)

클릭 이벤트가 발생할 때마다 span을 만들려면
해당 변수들이 이벤트가 발생하는 내부로 이동해야된다.

🤔 근데 그 span의 순서가 반대로여야 ux적으로 맞는 것 같은데?

기존 코드 operateHistory.appendChild(historySpan); 의 appendChild 를 prepend 로 바꿔주기

• prepend() : 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드

// operateHistory.appendChild(historySpan);
operateHistoryDiv.prepend(historySpan);

계산한 내역 한번에 지우기

🤔 clear할 때 history 안에 span들 한번에 안 지우고 싶..어..

// operateHistoryDiv 안에 있는 span 들을 전체 선택하는 변수 만들기
const historySpans = operateHistoryDiv.querySelectorAll("span");
console.log(historySpans) // calculate 시 span.old-history 가 추가된 배열 리턴
...

if(action === "clear") {
  ...
  // historySpans에 있는 만큼 도는데, 그때마다 operateHistoryDiv의 자식 노드 제거
  historySpans.forEach((el) => {
    operateHistoryDiv.removeChild(el);
  })
}

history에 소수점 반영하기

🤔 currentDisplay에 반영되는 소수점 history에 왜 반영이 안되지..
⇒ action === "decimal" 에 currentHistory 추가하기

currentHistory.textContent = currentHistory.textContent + ".";

수식 반복 입력 시 마지막에 입력한 수식으로 반영하기

🤔 operator 클릭했을 때, 이미 operator가 입력되어 있으면 이전에 입력했던 operator 삭제하고 새로 입력한 operator로 대체하고 계산하기

🤔 기존에 if 문 뒤에 else if로 추가했는데 왜 자꾸 안되는거야???
⇒ 기존의 if문에 있는 (clickHistory || previousKey === "number") 이 조건에 해당되니까 이게 실행되고 그 다음에 else if 가 무시되고 실행되지 않는 것. 순서를 잘 확인하자!

if (action === "operator") {
...

  if (clickHistory && previousKey === "operator") {
    const operatorDel = currentHistory.textContent
      .split(" ") // 공백을 기준으로 나눠서 배열로 만들기
      .slice(0, -1) // 마지막 operator 자르고
      .join(" "); // 자른거 다시 붙이는데 사이에 공백 추가하기
    currentHistory.textContent = operatorDel + " " + buttonContent;
    clickHistory = currentHistory.textContent;
  } else if (clickHistory || previousKey === "number") {
    // 만약 clickHistory 있거나 이전키가 number면 currentHistory 에 클릭한 operator 추가
    currentHistory.textContent = clickHistory + " " + buttonContent;
    // clickHistory 에 현재 currentHistory 값 저장
    clickHistory = currentHistory.textContent;
  }
  previousKey = "operator";
}

추가로 해야되는 것,,

나중에 시간되면 아래것들 꼭 추가해보자🥺

• , 찍기
• 이미 계산된 식에서 다시 calculate 를 눌렀을 때 이전에 수식을 한번 더 추가해서 계산하기
• 계산식에 수식이 3개 이상인 경우도 만들기