TIL Day 5 - 6

28322 ワード

計算機の作成


Achievement Goals

  • htmlとcssとjavascriptの接続手順は理解できます。

  • 計算機を実装する各プロセスで論理を確立し、コードに記述できます。

  • けいさんきけいじょう



    CSS CODE

    * {
      margin: 0;
      padding: 0;
      border: 0px;
      box-sizing: border-box;
      font-family: 'Righteous', cursive;
      color: #000;
    }
    body {
      background-image: url('./data/codestates-motif.png');
    }
    .container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .calculator {
      background-color: #4000c7;
      width: 350px;
      height: 500px;
      border-radius: 10px;
      padding: 30px 20px;
    }
    .calculator__display--bare {
      display: none;
      background-color: #ffffff;
      text-align: center;
      vertical-align: middle;
      height: 100px;
      width: 100%;
      border-radius: 10px;
      font-size: 20px;
      padding: 25px 15px;
      overflow: hidden;
      overflow-wrap: break-word;
    }
    .calculator__display--bare > span {
      display: inline-block;
      text-align: center;
      background-color: #f3f0fc;
      margin: 5px;
      width: 40px;
      height: 45px;
      border-radius: 10px;
      font-size: 20px;
      padding: 10px 5px;
    }
    .calculator__display--for-advanced {
      /* display: none; 이 줄을 모두 지우면 advanced 테스트를 하실 수 있습니다. */
      background-color: #ffffff;
      height: 100px;
      width: 100%;
      border-radius: 10px;
      font-size: 20px;
      text-align: right;
      vertical-align: right;
      padding: 25px 15px;
      overflow: hidden;
      overflow-wrap: break-word;
    }
    .calculator__buttons {
      background-color: #ffffff;
      width: 100%;
      height: 330px;
      margin-top: 10px;
      padding: 10px;
      border-radius: 10px;
    }
    .clear__and__enter {
      height: 50px;
      margin: 10px;
      background-color: #f3f0fc;
    }
    .clear__and__enter > button {
      border-radius: 10px;
      width: 50px;
      height: 40px;
      margin: 0px 5px;
      background-color: #00da75;
      cursor: pointer;
      outline: none;
    }
    .button__row {
      height: 50px;
      margin: 10px;
      background-color: #f3f0fc;
    }
    .button__row > button {
      width: 50px;
      height: 40px;
      border-radius: 10px;
      cursor: pointer;
      outline: none;
      background-color: #ebebeb;
    }
    .button__row > .operator {
      color: #ffffff;
      background-color: #313132;
    }
    .button__row > .double {
      width: 115px;
    }
    .button__row > .isPressed {
      background-color: #00da75;
    }
    .logo {
      position: fixed;
      padding: 30px;
      bottom: 0px;
      right: 0px;
    }

    Javascript Code


    document.querySelectorを使用してhtmlの段落を取得する

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

    計算関数の作成

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

    コンテキスト関連機能を実装するための変数の設定

    let firstNum, operatorForAdvanced, previousKey, previousNum;

    計算ボタンを起動する関数の作成

    buttons.addEventListener('click', function (event) {
      // 버튼을 눌렀을 때 작동하는 함수입니다.
      const target = event.target; 
      const action = target.classList[0]; 
      const buttonContent = target.textContent; 
      if (target.matches('button')) {
        if (action === 'number') {
          if(firstOperend.textContent !== '0'){
            secondOperend.textContent = buttonContent;
          }else{
            firstOperend.textContent = buttonContent;
          }
          console.log('숫자 ' + buttonContent + ' 버튼');
      }
      if (action === 'operator') {
          operator.textContent = buttonContent;
          console.log('연산자 ' + buttonContent + ' 버튼');
        }
        if (action === 'decimal') {
        }
        if (action === 'clear') {
          firstOperend.textContent = 0;
          secondOperend.textContent = 0;
          operator.textContent = '+';
          calculatedResult.textContent = 0;
          console.log('초기화 버튼');
        }
        if (action === 'calculate') {
          calculatedResult.textContent = calculate(firstOperend.textContent,operator.textContent,secondOperend.textContent);
          console.log('계산 버튼');
        }
      }
    });

    comment

  • HTML、css、javscriptはそれぞれのファイルに作成されhtmlに接続されており、開発者にとって便利で良い方法です.
  • を計算する過程で、状況の数に応じてコードを書く過程は非常に困難で、結果が現れ、論理的思考能力を感じさせた.
  • 小数点の記述コードはまだ完全に完成していないが,その中のすべての過程を復習するだけで満足している.