2021_03_08

TIL-HTML、CSS、JavaScriptを使用した計算機の作成

1.計算機の作成

step1. CSSを勝手に修正してきれいな計算機を作成します!
yourStyle.cssというファイルを修正して、私の欲しいデザインで計算機を飾りました.

ボタンにborder-radious、marginなどを適用し、スタイルを変更しました.
font-family、background-colorなどを適用して計算機を装飾します.
step2. 基本計算機能を実現!
script.jsというファイルを変更し、計算機能を実現しました.
初めて実現した機能は、デジタルボタンをクリックしたときに画面に表示される機能です.

if (target.matches('button')) { //클릭된 HTML 엘리먼트가 'button'이고
	if (action === 'number') { //클래스 정보가 'number'이고
       if(display.textContent ==='0' || intermediateOperator) { //첫번째　숫자를　입력했으면
        display.textContent = buttonContent;
       }
       else { //첫번째 숫자가 아니면
        display.textContent += buttonContent;
       }
     }

クリックしたボタンが最初の数字である場合は、クリックした数字で画面に置き換える必要があります.最初の数字でない場合は、クリックした数字を加えて画面に表示します.
たとえば、計算機で初めて7という数字をクリックすると、表示されていた0が7になり、9を入力すると、表示されていた7プラス9が79に表示されます.
次に実現する主な機能は,実際の演算機能である.

function calculate(n1, operator, n2) { //숫자1, 연산자, 숫자2
  let result = 0; //연산결과
  let num1 = Number(n1);
  let num2 = Number(n2);
  if(operator === '+') //연산자가 '+' 라면
    result = num1 + num2;
  else if(operator === '-') //연산자가 '-'라면
    result = num1 - num2;
  else if(operator === '*') //연산자가 '*'라면
    result = num1 * num2;
  else if(operator === '/') //연산자가 '/'라면
    result = num1 / num2;
  return String(result); //연산결과 return
}

関数calculationは、数値1、演算子、数値2をパラメータとして演算し、結果を返す関数です.
n 1とn 2が表示されます.textContent()として受信して保存するので、文字列として保存します.そこで,演算を行うためにnumberという手法を用いて数値に変換して演算を行う.
私が実現した最後の機能は初期化機能です.

if (action === 'clear') { //클래스의 정보가 'clear'라면
      firstOperend.textContent = '0'; //첫번째 숫자 0으로 초기화
      secondOperend.textContent = '0'; //두번째 숫자 0으로 초기화
      operator.textContent = ''; //연산자 '+'로 초기화
      calculatedResult.textContent = '0'; //연산결과 0으로 초기화
}

計算機のACボタンを押して、計算時に使用したすべての変数をデフォルト値にリセットします.
step3. テストしてみます!

上の画像のすべての機能を通過していることがわかります.
ハーモニーが見たいならここに来て!
今日、HTML、CSS、JavaScriptを使用して計算機を作成しました.
明日はレイアウトとオブジェクトを調べてみましょう.
今日はここまで!