初めに

動画で習った内容を理解できた。でも自分で作れるかはどうだろう？javascriptの練習課題が必要と考え、電卓の作り方を書きました。小さい作品でいいから自分で作り上げていくことが大切。電卓は基礎問題の宝庫です。
最も簡単な「とりあえず計算できる」状態から、エラーを減らし、様々な機能を追加した状態にしていきたいと思います。

[完成版はこちら]
(https://mycalculator-a79ad.firebaseapp.com/)

Javascriptで四則演算
6)打った数字をコンソールに出力させよう。
7)打った数字と記号を変数に格納しよう。
8)計算結果を出力させよう。
8-1）「＝」を押した時の処理
8-2) 計算結果と計算途中を、計算結果の画面に表示させよう。

第3回　連続で演算記号や小数点が押された場合の不具合処理

最初に「＋　÷　－　×　＝」が押せないようにする。
二回連続で計算できるようにしたい。
Cボタン（リセットボタン）を押した時の処理
BS(バックスペース）ボタンを使えるようにする

第4回　小数点を正しく入力できるように改善しよう

12.12.や12..12のように小数点を間違って入力できてしまう。
電卓と同じように「.4」と入力したら0.4としたい。

第5回　演算記号を連続して押した時の不具合を直そう

第6回　バックスペースを押した時の不具合を直そう。

第7回　「4 ÷ 3 = 1.33333333333333333」の表示桁数を10桁にしたい

第8回　「電卓と同じ表示画面を目指そう

レベル１のイメージ

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>電卓</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class = "container">
<!--      計算結果を出力する場所-->
      <div id = "output_total" class="output ">0</div>
<!--      計算過程を出力する -->
      <div id = "output_sub" class="output active">0</div>
<!--      ボタンを配置する場所-->
      <div class = 'input'>
          <section class = 'row'>
            <div id = "clear">C</div>
            <div class = "num_bth"></div>
            <div class = "num_bth" id="bs">BS</div>       
            <div class = "num_bth " data-index-id= '/'>÷</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 9 >9</div>
            <div class = "num_bth " data-index-id = 8 >8</div>
            <div class = "num_bth " data-index-id = 7 >7</div>
            <div class = "num_bth " data-index-id = '*'>×</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 6 >6</div>
            <div class = "num_bth " data-index-id = 5 >5</div>
            <div class = "num_bth " data-index-id = 4 >4</div>
            <div class = "num_bth " data-index-id = '-'>－</div>     
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 3 >3</div>
            <div class = "num_bth " data-index-id = 2 >2</div>
            <div class = "num_bth " data-index-id = 1 >1</div>
            <div class = "num_bth " data-index-id = '+'>+</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth" data-index-id = 00 >00</div>
            <div class = "num_bth" data-index-id = 0 >0</div>
            <div class = "num_bth" data-index-id = . >.</div>
            <div id = 'equal_btn'>=</div>       
          </section>        
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

HTMLの出力結果

「data-index-id = 9」の記載がわからない場合は、「JavaScript」「data属性（カスタムデータ属性）」で検索して復習してみよう。

CSS

1)containerの幅は200px。上から50xp余白を作り、左右の余白は均等。全体を2pxの黒線の枠線を書こう。

.container {
  width: 200px;
  margin: 50px auto;
  border: 2px solid black;
}

2)計算結果の出力場所のスタイリング

幅　200px
高さ 50px
文字は、高さは中央揃え、横は右寄せ
padding 5pxで文字と枠線にスペースを持たせる
枠線の下に5pxのmarginをとる。

.output {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
  border:2px solid black;
}

3)widthがpaddingの分だけずれてしまった。widthにpadding含ませるにはどうしよう？

.output {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
  border:2px solid black;
  box-sizing: border-box;
}

box-sizing: border-box;とすると、widthにpadding含ませられるので、綺麗に揃う。

4)ボタンの部分のスタイリング

幅 200px;
2pxの黒の枠線

.input {
  width:200px;
  border: 2px solid black; 
}

5)ボタンのスタイリング
5-1)ボタンを横並びにしたい

.row {
  display: flex;
}

5-2)ボタンにスペースを作り、均等に配置したい

.row {
  display: flex;
  justify-content: space-between;
}

【均等配置】
justify-content: space-between;
とすると、各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せることができる。
MDNのjustify-contentの解説

5-3)ナンバーボタン、クリアボタン、イコールボタンをスタイリングしよう。

幅　60px
高さ　30px
文字は高さ中央揃え、横は中央
色はgray
少し丸めよう（30%)
ボタンがカーソルが乗ったことがわかるようにしてみよう。

.row {
  display: flex;
  justify-content: space-between;
  border: 2px solid red;
  width: 200px;
}
/*rowの範囲がわかりやすいように赤の枠を作っています。*/

.num_bth, #clear, #equal_btn{
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30%;
  background: lightgray;
  cursor: pointer 
}

5-4)ボタンの間に余白を作ろう

.num_bth, #clear, #equal_btn{
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30%;
  background: lightgray;
  cursor: pointer;
  margin: 5px;
}

ボタンのスタイリングはほぼ完成。
今までのCSSのコードはこちら

.container {
  width: 200px;
  margin: 50px auto;
  border: 2px solid black;
}

.output {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
  border:2px solid black;
  box-sizing: border-box;
}

.input {
  width:200px;
  border: 2px solid black; 
}

.row {
  display: flex;
  justify-content: space-between;
  border: 2px solid red;
  width: 200px;
}
/*rowの範囲がわかりやすいように赤の枠を作っています。*/

.num_bth, #clear, #equal_btn{
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30%;
  background: lightgray;
  cursor: pointer;
  margin: 5px;
}

次回、javascriptで計算をしていきたいと思います。

初めに

目次

レベル１のイメージ

HTML

CSS