javascriptで電卓を作る方法

今回はjavascriptを使って電卓のような計算を行う方法を紹介します。

javascriptで電卓を作る方法

html

まず計算結果部分と計算するときの数字や計算ボタンの構造をhtmlで作ります。

計算結果はresultクラスの要素で電卓部分はcalculator-boxクラスになります。

<div id="calculator">
  <div class="result"><div id="display"></div></div>
  <div class="calculator-box">

          <button id="nine" class="num">9</button>
          <button id="eight" class="num">8</button>
          <button id="backspace">⌫</button>

          <button id="six" class="num">6</button>
          <button id="seven" class="num">7</button>
          <button id="decimal">.</button>

          <button id="four" class="num">4</button>
          <button id="five" class="num">5</button>
          <button id="divide">/</button>

          <button id="two" class="num">2</button>
          <button id="three" class="num">3</button>
          <button id="multiply">*</button>

          <button id="zero" class="num">0</button>
          <button id="one" class="num">1</button>
          <button id="subtract">-</button>

          <button id="clear">C</button>
          <button id="equals">=</button>
          <button id="add">+</button>

</div>
</div>

javascript

htmlで基本の構造を作ったら次はjavascriptで計算の処理を作ります。

let display = document.getElementById("display");
let buttons = document.querySelectorAll("button");
let operator = "";
let operand1 = "";
let operand2 = "";

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    let value = this.innerHTML;
    if (value === "C") {
      display.innerHTML = "";
      operator = "";
      operand1 = "";
      operand2 = "";
    } else if (value === "⌫") {
      let length = display.innerHTML.length;
      display.innerHTML = display.innerHTML.slice(0, length - 1);
    } else if (value === "+" || value === "-" || value === "*" || value === "/") {
      operator = value;
      operand1 = parseFloat(display.innerHTML);
      display.innerHTML += value;
    } else if (value === ".") {
      if (display.innerHTML.indexOf(".") === -1) {
        display.innerHTML += value;
      }
    } else if (value === "=") {
      operand2 = parseFloat(display.innerHTML.split(operator)[1]);
      if (operator === "+") {
        display.innerHTML = operand1 + operand2;
      } else if (operator === "-") {
        display.innerHTML = operand1 - operand2;
      } else if (operator === "*") {
        display.innerHTML = operand1 * operand2;
      } else if (operator === "/") {
        display.innerHTML = operand1 / operand2;
      }
    } else {
      display.innerHTML += value;
    }
  });
}

電卓のデザインを作る

上記で計算の処理や動きができましたね。

次は実際の電卓のようなデザインをcssで指定していきます。

css

#calculator{
        background: #f6f6f6;
        border: solid 1px #333;
        border-radius: 5px;
        padding: 10px;
}
.calculator-box{
        display: flex;
        flex-wrap: wrap;
}      
.calculator-box button{
        margin: 5px;
        width: calc(100% / 3 - 10px);
	border: solid 1px #888;
	padding: 6px;
}

.result{
	cursor: pointer;
	background: #fff;
	text-align: right;
	margin-bottom: 10px;
	height: 40px;
	padding: 0 6px;
	display: flex;
    	align-items: center;
    	justify-content: end;
}

.num{background: #fff;}

電卓サンプル

下記は電卓のサンプルになります。