코드스테이츠 프론트엔드 부트캠프-Section1 계산기 제작(Feat. HTML, CSS, JS)

그래도 아무튼 개발자·2023년 3월 2일

Front_End

목록 보기

2/12

HTML과 CSS를 활용하여 계산기 목업을 앞서 만들었다.
이후에는 JS까지 첨가하여 계산 기능을 가진 찐 계산기를 제작하는 과제가 주어졌다.
부트캠프이다보니 수강생들을 보면 완벽한 코린이, 비전공자부터 전공자까지 다양하게 분포되어 있다.
그렇다보니 여기에서도 계산기 구현 단계를 나누었다.

Bare Minimum - Advanced Challenges - Nightmare

Bare Minimum

위와 같이 {한자릿수} {연산자} {한자릿수} = {결과} 이렇게만 구현하면 된다. 마우스로 클릭하였을 때 숫자판에 입력이 되고, 연산자를 누르면 가운데 연산자가 바뀌고, Enter를 누르면 연산 결과값이 나오게 구현하면 Bare Minimum 단계는 클리어된다.

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')) {
        // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      // 그리고 버튼의 클레스가 number이면
      if (firstOperend.textContent === '0') firstOperend.textContent=buttonContent;    //첫 숫자가 현재 0일 경우, 첫 숫자를 누른 버튼의 숫자로 변경
      else secondOperend.textContent=buttonContent;  //아닐 경우 두번째 숫자를 누른 버튼의 숫자로 변경
    }

    if (action === 'operator') {
      operator.textContent=buttonContent;   //operator 값에 누른 버튼 값 저장
    }

    if (action === 'decimal') {
      console.log('소수점 버튼');   //한 자릿수 계산이기에 구현할 필요 X
    }

    if (action === 'clear') {
      firstOperend.textContent='0';  
      operator.textContent='+';
      secondOperend.textContent='0';
      calculatedResult.textContent='0';    //0+0=0으로 다시 세팅
    }

    if (action === 'calculate') {
      calculatedResult.textContent = calculate(Number(firstOperend.textContent), operator.textContent, Number(secondOperend.textContent));
    }
  }
});

아주 간단하게 구현이 되었다!👌
calculate함수는

function calculate(n1, operator, n2) {
  let result = 0;
  if(operator === '+') result=n1+n2;
  else if(operator === '-') result=n1-n2;
  else if(operator === '*') result=n1*n2;
  else if(operator === '/') result=n1/n2;
  return String(result);
}

이렇게 구현이 되어있다. 마지막 calculate action에서 해당 calculate 함수가 불러와져서 연산이 진행된다.

참고로 디자인은 보기 좋게 이전의 계산기 목업 CSS파일 속성들의 일부를 불러왔다..!
Bare Minimum 클리어!!

Advanced Challenges

Nightmare

Bare Minimum과는 달리 여러 자릿수의 숫자를 다룰 수 있도록 일반적인 계산기를 구현하는 단계이다. 숫자가 입력되어 있으면 계속해서 자릿수가 이어지도록 구현하면 된다.
참고로 코드에는 Nightmare 단계 또한 포함되어 있으니 이해 부탁드려요!

f (target.matches('button')) {
    if (action === 'number') {
      if (display.textContent==='0' || previousKey==='operator') display.textContent=buttonContent; //previousKey(이전에 누른 키)가 operator(연산자) 이거나 디스플레이에 있는 숫자가 현재 0일 경우
      else display.textContent = display.textContent + buttonContent;  //아닐 경우 디스플레이에 0이 아닌 다른 숫자가 떠 있는 경우이므로 뒤에 숫자를 더 붙인다.
      previousKey = 'number';
    }
    if (action === 'operator') {
      if(previousKey==='operator') previousKey='operator'; 
      else if(previousKey==='calculate') previousKey='calculate';
      else if(firstNum) {
        display.textContent=calculate(Number(firstNum), operatorForAdvanced, Number(display.textContent)); //firstNum이 존재하는 경우 calculate 결과(임시 결과)를 화면에 띄운다.
      }
      firstNum=display.textContent; //firstNum은 현재 화면에 띄워져 있는 값으로 지정
      operatorForAdvanced = buttonContent; //operator 값 저장
      previousKey='operator';
    }
    if (action === 'decimal') {
      if(previousKey==='decimal') previousKey='decimal';
      else if(display.textContent === '0' || previousKey==='operator') display.textContent='0.';
      else display.textContent = display.textContent + '.'; //화면에 있는 숫자 옆에 .을 붙인다.
      previousKey='decimal';
    }
    if (action === 'clear') {
      display.textContent='0';
      firstNum=undefined;
      operatorForAdvanced=undefined;
      previousKey='clear';   //초기 상태로 세팅
    }
    if (action === 'calculate') {
      if (firstNum===undefined){
        previousKey='number';
      } 
      else if (previousKey=='calculate') {
        display.textContent=calculate(Number(display.textContent), operatorForAdvanced, Number(previousNum));
      }
      else {
        previousNum=display.textContent; //previousNum에 화면 숫자 저장
        display.textContent=calculate(Number(firstNum), operatorForAdvanced, Number(display.textContent)); //화면에 calculate 값 띄우기
        previousKey='calculate';
      }
    }
  }