[TIL] Day7

· What?
計算機の作成
学んだことは記録されていますが、間違いの可能性が高く、修正が必要な内容が多いです.
Bare Minimum Requirements
課題ではhtml,cssを与え,jsにTODOリストを注釈として追加し,計算機を作成し,これまで習ったjs文法を正しく習得しているかどうかを確認したい.
calculate関数の作成

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

計算機を作成する前に計算を担当していた関数を小数点以下に計算するため、parseFloat()を使用しました.
0+0=0をベースとした計算機の作成

let operb = true; //operator가 존재하는지 존재하지 않는지 여부를 따지기 위한 변수
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 (operb === true) {// operator가 존재하지 않는다면 첫번째 숫자에 숫자를 넣는다
      firstOperend.textContent = buttonContent;
    } else {// 존재한다면 두번째 숫자에 숫자를 넣는다
      secondOperend.textContent = buttonContent;
    }
  if (action === 'operator') {
    if (operb === true) {
      operator.textContent = buttonContent;
      operb = false; //operator 가 존재한다로 바꿔줌
    }
  if (action === 'decimal') {      
  }

  if (action === 'clear') {
    firstOperend.textContent = 0;
    secondOperend.textContent = 0;
    operator.textContent = '+';
    calculatedResult.textContent = 0;
    operb = true; //operator가 존재하지 않는것으로 바꿈)  
  }
  if (action === 'calculate') {
    calculatedResult.textContent = calculate(Number(firstOperend.textContent), operator.textContent, Number(secondOperend.textContent));
  }
}
});

クレイジーな発想ですが、最初の数字を0に指定したい場合もあるかもしれません(電卓をやっているときはよくありますが)、if (action === 'number') の数字部分を符号化するときは、数字0ではなく演算子で数字を加算したいのですが、実際にはそのように加算されていますが、負担が多くなりました.
check list

clearボタンを押すと、画面の順序は0、+、0、=および0でなければなりません.

の最初の数字ボタンを押すと、最初の画面に押した数字が表示されます.

数字ボタンと演算子ボタンを押すと、最初の画面に数字が表示され、2番目の画面に演算子が表示されます.

数字ボタン、演算子ボタン、数字ボタンを押す場合、画面に数字、演算子、順序で表示する必要があります.

数字ボタン、演算子ボタン、数字ボタン、Enterボタンを押すと、数字、演算子、数字、=および演算結果の順に表示されます.

演算時script.jsのcalculate関数を使用する必要があります.

clearボタンを押すと、画面の順序は0、+、0、=および0でなければなりません.

チェックリストはすべて通過したので、Bare minimum testは通過しました.
Advanced Challenge Test
//コードを削除し、同じコードをアップロードしない
Step 1-数字ボタンを押して画面に数字を入力する
Step 2-Enterボタンを押して計算し、ACボタンで初期化する
ACボタンが正しくクリックされているかどうかをテストします.
など様々なタイプの計算機に関連する問題があり、特に問題はなく、例外事項を除いて解決しました.
その後,深化問題を解決する際に,問題の条件に応じてifを絶えず追加したり,既存のものに新しいものを追加したりすると,完成したものが雑然としていることがわかる.総じて、何度か繰り返して、もう一度解答して、もう一度参考を確認しますが、初めて問題を見て、問題で欲しいものを確認して、正しい首都コードを作るのが最優先だと思います.まず言語で表現することで、コードを書く際の煩雑さを減らし、欲しい内容を正確に書くことができます.