7日目TIL

開始します。

今日は昨日の計算機のタスクを変更し、Nightmareフェーズに実装できます.Pairと詰まる部分を考えて課題をクリアし、1人で1時間程度コードを修正し、Nightmareフェーズをクリアすることにしましたが、今日はアルゴリズムについてPairに説明し、改善すべき部分を探します.

完了したコード

const calculator = document.querySelector('.calculator'); // calculator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const buttons = calculator.querySelector('.calculator__buttons'); // calculator__keys 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

const display = document.querySelector('.calculator__display--for-advanced'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
let first, second, last, operatorForAdvanced

function calculate(n1, operator, n2) {
  let result = 0;
  let num1 = Number(n1);
  let num2 = Number(n2)
  if(operator === '+') result = num1 + num2;
  if(operator === '-') result = num1 - num2;
  if(operator === '*') result = num1 * num2;
  if(operator === '/') result = num1 / num2;
  // TODO : n1과 n2를 operator에 따라 계산하(n1)는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  return String(result);

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') {
      if (display.textContent === '0') {
        display.textContent = buttonContent
      }
      else if (first !== '' && second === '') {
        display.textContent = buttonContent;
        second = buttonContent;
      }
      else if (second !== '') {
      display.textContent = display.textContent + buttonContent;
      second = display.textContent;
      }
      else display.textContent = display.textContent + buttonContent
    }
    if (action === 'operator') {
      if (last === '+' || last === '-' || last === '*' || last === '/') {
        operatorForAdvanced = buttonContent
      }
      else if (second === '') {
      first = display.textContent;
      operatorForAdvanced = buttonContent;
      }
      else if (second !== '' ) {
      first = calculate(first, operatorForAdvanced, second);
      second = '';
      operatorForAdvanced = buttonContent;
      }
    }
    if (action === 'decimal') {
      if (last === '.') {}
      else if (first === '' && second === '') {
        display.textContent = display.textContent + '.'
      }
      else if (second === '') {
        display.textContent = '0.'
        second = display.textContent
      }
      else if (second !== '') {
        display.textContent = display.textContent + '.'
        second = display.textContent
      }
    }
    if (action === 'clear') {
     display.textContent = '0'
     first = ''
     second = ''
     operatorForAdvanced = ''
    }
    if (action === 'calculate') {
      if (first === '' && second === '') {}
      else if (second === '') {
        display.textContent = calculate(first, operatorForAdvanced, first);
      }
      else {
        display.textContent = calculate(first, operatorForAdvanced, second);
        first = calculate(first, operatorForAdvanced, second);
      }
    }
    last = buttonContent
  }

});

ソリューション

最初に詰まった部分は入力時に第1項と第2項を区別します.初期設計アルゴリズムを設計した場合、初期数値を入力し、演算子(+,-,*,/)をクリックし、表示に入力した数値を最初の変数に入力し、1回ごとに2番目の変数に数値を割り当てます.だからifで第1項を入力するか第2項を入力するかを区別しますコードを変更し、ボタンを変数に割り当てます.
その後Nightmareフェーズのテストコードに合格しなかった部分は「.」連続クリックでエラーが発生しました.最初、chart methodを表示する最後の文字は「.」もしそうであれば、無視するためにコードを作成しますが、演算子を連続的にクリックすると、他の値を出力するエラーも発生するため、2つのエラーを統合して同じ方法で処理することにしました.最後に、buttonContentをlast変数に割り当てて、last変数によってボタンをクリックしたときに前にクリックしたボタンが何であるかを決定します.「最後」すでに「.」が割り当てられています.コードを変更して、演算子を再度クリックまたは割り当て、演算子を再度クリックすると無視されます.ただし、演算子が連続して入力されると、buttonContentはoperatorForAdvancedに割り当てられ、最後に押された演算子として計算されます.
その後、最後のテストコードは「1+5-2+7/8=」のように計算を続け、second変数に値を割り当てる場合、演算子をクリックすると、現在のfirst変数とsecond変数の値を計算し、first変数に再割り当てし、second割り当ての値をクリアしてNightmareステップを完了します.

の最後の部分

問題はロングコーディングテストをしていて、私が作成したページが働いているかどうかを直感的に確認できることで、達成感があります.課題を行う過程で,より簡潔なコードがあるか,アルゴリズムが初期に設計されていないかを考えてきた.今後はNightmareフェーズのテストコードを確認してアルゴリズムを設計すべきだと思います.