[JS] 계산기 프로그램 구현하기

HTML, CSS, Javascript를 사용하여 계산기 프로그램을 구현하였다.

 

 

 

 

 

0.사칙연산

각 사칙연산의 경우의 수를 나누어서 parseFloat로 실수 연산도 가능하게 하였다.

마지막에 출력할 때는 String으로 변환하여 화면에 출력되도록 하였다.

function calculate(n1, operator, n2) {
  let result = 0;
  n1 = Number(n1);
  n2 = Number(n2);

  if(operator === '+'){
    result = parseFloat(n1)+parseFloat(n2);
    console.log(result);
  }
  else if(operator === '-'){
    result = parseFloat(n1)-parseFloat(n2);
    console.log(result);
  }
  else if(operator === '*'){
    result = parseFloat(n1)*parseFloat(n2);
    console.log(result);
  }
  else{
    result = parseFloat(n1)/parseFloat(n2);
  }
  return String(result);
}

 

 

 

1. 온점 부분

if (action === 'decimal') {

      //.이 이미 있는 경우 실행하지 않게 한다
      if (display.textContent.includes('.')) {
        return;
      }

      display.textContent += '.';
      stack.push('.');
      console.log(stack);

      //직전 버튼이 연산자인 경우 0. 으로 초기화한다.
      if(previousKey === 'operator'){
        display.textContent = "0."
        stack.push("0.");
        previousKey = 'number';
      }

      //연산자를 눌렀던 경우, 파란색인 isPressed class를 없앤다.
      if (previousOperatorButton !== null) {
        previousOperatorButton.classList.remove('isPressed');
        }
    }

 

 

 

2. 계산 부분

let stack = [];을 선언하여 버튼이 클릭될 때 마다 stack에 push로 값을 넣었다.

연산자도 마찬가지로 push로stack에 저장했으며

계산할 때는  두 가지로 나누어서 생각을 했다.

 

 

1) 처음 계산한 경우에는 firstNum 값과 연산자, 그리고 보여지는 숫자를 가져와서 연산해주었다.

	console.log(`${firstNum} ${operatorForAdvanced} ${display.textContent}`);
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);

 

 

2) 두 번째 계산(enter를 두번 이상 누른 경우) 부터는 stack에 있는 값 중 사칙연산에 있는 값까지를 잘라서

그 바로 뒤에 있는 stack 값을 lastNum에 할당하였다.

보여지는 숫자를 첫번째 값에 넣고, 연산자, 그리고 lastNum을 연산해주었다.

 else{
          let lastNum;
          for (let i = stack.length - 1; i >= 0; i--) {
          let currentItem = stack[i];
          if (["+", "-", "*", "/"].includes(currentItem)) {
            operatorForAdvanced = currentItem;
            lastNum = stack.slice(i + 1).join("");
          }
        }
        console.log(`${display.textContent} ${operatorForAdvanced} ${lastNum}`);
        display.textContent = calculate(display.textContent, operatorForAdvanced, lastNum);

 

 

 

 

계산 부분의 코드는 다음과 같다.

    buttons.addEventListener('click', function (event) {
    //계산하기
    if (action === 'calculate') {

      if (previousOperatorButton !== null) {
        previousOperatorButton.classList.remove('isPressed');
        }

		//첫 계산인 경우
      if(calculationCount == 0){
        console.log(`${firstNum} ${operatorForAdvanced} ${display.textContent}`);
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
        previousKey = 'calculate';
        calculationCount++;
      }
      // 두번째 이상 계산인 경우
      else{
          let lastNum;
          for (let i = stack.length - 1; i >= 0; i--) {
          let currentItem = stack[i];
          if (["+", "-", "*", "/"].includes(currentItem)) {
            operatorForAdvanced = currentItem;
            lastNum = stack.slice(i + 1).join("");
          }
        }
        console.log(`${display.textContent} ${operatorForAdvanced} ${lastNum}`);
        display.textContent = calculate(display.textContent, operatorForAdvanced, lastNum);
        previousKey = 'calculate';
      }
    }
  }

 

 

 

 

 

3. 연산자 버튼 누르기 전까지 숫자버튼을 누르면 이어붙여서 출력

isSecond라는 변수를 할당해서 두번째 값인지를 판단을 한다.

 

연산자를 누르기 전까지는 isSecond 값은 계속 false이며,

연산자를 누르면 isSecond 값을 true로 변경하고 secondOperend에 값을 이어붙여서 보이게 한다.

let isSecond = false;

if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      // 그리고 버튼의 클레스가 number이면
      // 아래 코드가 작동됩니다.
      console.log('숫자 ' + buttonContent + ' 버튼');

      if(!isSecond){
        if(firstOperend.textContent == 0){
          firstOperend.textContent = buttonContent;
        }
        else{
          firstOperend.textContent += buttonContent;
        }
        
      }
      else{
        if(secondOperend.textContent == 0){
          secondOperend.textContent = buttonContent;
        }
        else{
          secondOperend.textContent += buttonContent;
        }
    }
  }
  
      if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
      operator.textContent = buttonContent;
      isSecond = true; 
    }

 

 

 

 

 

 

전체 코드는 깃허브에서 확인 가능하다.

https://github.com/matchaing/fe-sprint-calculator