Jan27 - Simple Calculator

Tia Hwang·2020년 1월 30일

daily JS

목록 보기

2/5

1. 무엇을 만들었는가?

자바스크립트를 사용하여 간단한 계산기 만들기

2. HTML

  <body>
    <h1>Simple Calculator</h1>
    <label for="n1">First number :</label>
    <input type="text" id="n1" class="n1" />
    <br />
    <label for="n2">Second number:</label>
    <input type="text" id="n1" class="n2" />
    <br />
    <input type="button" value="Sum" class="sum" />
    <input type="button" value="Subtract" class="subtract" />
    <input type="button" value="Multiply" class="multiply" />
    <input type="button" value="Divide" class="divide" />
    <p class="js--result"></p>
    <script src="index.js"></script>
  </body>

3. Javascript

const firstNum = document.querySelector(".n1");
const secondNum = document.querySelector(".n2");
const sum = document.querySelector(".sum");
const subtract = document.querySelector(".subtract");
const multiply = document.querySelector(".multiply");
const divide = document.querySelector(".divide");
const result = document.querySelector(".js--result");

const cal = {
  sum: function() {
    const num1 = parseInt(firstNum.value);
    const num2 = parseInt(secondNum.value);
    result.innerText = `The result is ${num1 + num2}`;
  },
  subtract: function() {
    const num1 = firstNum.value;
    const num2 = secondNum.value;
    result.innerText = `The result is ${num1 - num2}`;
  },
  multiply: function() {
    const num1 = firstNum.value;
    const num2 = secondNum.value;
    result.innerText = `The result is ${num1 * num2}`;
  },
  divide: function() {
    const num1 = firstNum.value;
    const num2 = secondNum.value;
    result.innerText = `The result is ${num1 * num2}`;
  }
};

sum.addEventListener("click", cal.sum);
subtract.addEventListener("click", cal.subtract);
multiply.addEventListener("click", cal.multiply);
divide.addEventListener("click", cal.divide);