Code States 6일차

오늘의 키포인트

계산기를 만들자

---------------------

시간내에 기본적인 계산기만 만들면 되며,
시간이 남는 다면 Advanced Challenges 그리고 더 시간이 남는다면 nightmare난이도를 풀면 되는데
Advanced까진 금방 풀었고 nightmare도 마지막 하나의 테스트 케이스만 빼고 풀었다
그 마지막 하나를 영영 통과 못하고 있다...

통과 못하고 있는 부분은 짧게 표현하자면
3+++2....5-1=4.5가 나오면 된다.
앞부분에 특이 케이스로
.이 여러개라도 1개와 마찬가지로 하기
+++이런식으로 나와도 +로 하기
3*3==== 하면 243이 나오기 이런 케이스를 하다보니
마지막 케이스와 충돌을 일으킨다
=를 처음 누를때와 그 이후로 나눠서 코딩을 했고 연산자 여러번 누를때도 연산자가 처음일때랑 그 이후로 나눴다.
마지막 케이스는 중간에 연산자가 많이 나오고 =는 한번이라 앞부분과 충돌이 되서 해결해 보려했는데 근본적으로 다르게 접근해야 할것같다

주말에 처음부터 해봐야겠다

----------------------

백그라운드 사진이 윈도우 크기에 따라 크기 달라지게 하기화면 크기에 따라 이미ㅇ지 크기 바뀌는거
body {

 

  width: 100%;

  height : 100vh;

  background-image: url('./data/bono.jpeg');

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

----------------------------------저장용 코딩---------------------------

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 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

let count = 0, decimalCount = 0, operCount = 0;

let i = 0 ;

let oper ='';

let midresult=0;

let n1=0, n2=0;

 

function calculate(n1, operator, n2) {

  let result = 0;

  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.

  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.

  switch(operator){

    case '+':

      result = n1 + n2;

        break;

    case '-':

      result = n1 - n2;

        break;

    case '/':

      result = n1 / n2;

        break;

     case '*':

       result = n1 * n2;

        break;

  }

  return String(result);

}

 

/* 기본모드

buttons.addEventListener('click', function (event) {

  // 버튼을 눌렀을 때 작동하는 함수입니다.

 

  const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.

  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.

  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.

  // ! 위 코드(Line 19 - 21)는 수정하지 마세요.

  if (target.matches('button')) {

    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.

    // 클릭된 HTML 엘리먼트가 button이면

    if (action === 'number' && count ===0) {

      // 그리고 버튼의 클레스가 number이면

      // 아래 코드가 작동됩니다.

      n1 += buttonContent;

      n1 = Number(n1);

      document.querySelector(".calculator__operend--left").textContent=n1;

      console.log('숫자 ' + buttonContent + ' 버튼');

      console.log(n1);

      console.log(firstOperend);

    }

 

    if (action === 'operator') {

      document.querySelector(".calculator__operator").textContent=buttonContent;

      oper = buttonContent;

      count +=1;

      console.log('연산자 ' + buttonContent + ' 버튼');

      console.log(oper);

      console.log(operator);

    }

 

    if (action === 'number' && count !== 0) {

      // 그리고 버튼의 클레스가 number이면

      // 아래 코드가 작동됩니다.

      n2 += buttonContent;

      n2 = Number(n2);

      document.querySelector(".calculator__operend--right").textContent=n2;

     

      console.log('숫자 ' + buttonContent + ' 버튼');

      console.log(n2);

    }

    if (action === 'decimal') {

       console.log('소수점 버튼');

   

      if(count === 0){

        n1 = n1 + '.';

        document.querySelector(".calculator__operend--left").textContent=n1;

        console.log(n1);

      }

      else{

        n2 = n2 + '.';

        document.querySelector(".calculator__operend--right").textContent=n2;

        console.log(n2);

      }

     

     

    }

     

 

    if (action === 'clear') {

      console.log('초기화 버튼 시작');

      n1 = 0;

      n2 = 0;

      oper = '';

      count = 0;

      res = 0;

      document.querySelector(".calculator__operend--left").textContent=0;

      document.querySelector(".calculator__operator").textContent='+';

      document.querySelector(".calculator__operend--right").textContent=0;

      console.log('초기화 중간');

      document.querySelector(".calculator__result").textContent=0;

      console.log('초기화 버튼끝');

    }

 

    if (action === 'calculate') {

      res = calculate(n1, oper, n2);

      res = Math.round(res*10)/10;

      document.querySelector(".calculator__result").textContent=res;

      console.log('계산 버튼');

      console.log(res);

    }

  }

 

});

*/

 

// ! Advanced Challenge test와 Nightmare test를 위해서는 아래 주석을 해제하세요.

 

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 엘리먼트의 텍스트 정보를 가져옵니다.

  // ! 위 코드는 수정하지 마세요.

 

  if (target.matches('button')) {

    if (action === 'number') {

      n1 += buttonContent;

      n1 = parseFloat(n1);    

      document.querySelector(".calculator__display--for-advanced").textContent=n1;

      console.log("숫자버튼 클릭");

    }

 

    if (action === 'operator') {

      if(oper ===''){

        midresult = n1;

        n1=0;

        decimalCount = 0;

        document.querySelector(".calculator__display--for-advanced").textContent=n1;

      }

      if(oper !== ''){

        if(operCount === 0){

          res = calculate(midresult, oper, n1);

          res = parseFloat(res);

         

          n1 = 0;

          console.log(`연산자 첫 계산 ${res}`);

        }

        else{

          res = calculate(midresult, oper, n1);

          res = parseFloat(res);

          i = res;

          n1 = 0;

          console.log(`연산자 그 후 계산 ${res}`);

        }

        midresult=res;

       

      }

      oper = buttonContent;

 

      console.log('연산자 클릭');

      console.log(oper);

      console.log(res);

    }

  }

    if (action === 'calculate' && oper !=='') {

      if(count === 0){

        if(n1 === 0){

          n1 = midresult;

        }

        res = calculate(midresult, oper, n1);

        res = parseFloat(res);

        count +=1;

      }

      else{

        res = calculate(res, oper, n1)

        res = parseFloat(res);

      }

      //res = Math.round(res*10)/10;

        document.querySelector(".calculator__display--for-advanced").textContent=res;

      console.log('계산 버튼');

      console.log(res);

    }

 

    if (action === 'clear') {

      console.log('초기화 버튼 시작');

      n1 = 0;

      midresult = 0;

      oper = '';

      res = 0;

      count = 0;

      decimalCount = 0;

      operCount = 0;

      document.querySelector(".calculator__display--for-advanced").textContent=0;

    }

 

    if (action === 'decimal' && decimalCount === 0) {

      console.log('소수점 버튼');

       n1 = n1 + '.';

       decimalCount +=1;

       document.querySelector(".calculator__display--for-advanced").textContent=n1;

       console.log(n1)

    }

 

});