Javascriptで電卓を作ろう　第1回 　HTMLとCSSでボタンを横並びで配置しよう

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

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


# 目次
[第1回 HTMLとCSSでボタンを横並びで配置しよう（今回はここ）](https://qiita.com/rikimaru914/items/3412df78570b48b25858)

- HTMLのマークアップ
- CSS

[第2回　四則演算をやってみよう](https://qiita.com/rikimaru914/items/a30d83c43a4eb14ba999)

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

[第3回　連続で演算記号や小数点が押された場合の不具合処理](https://qiita.com/rikimaru914/items/8df2124165afd036b922)

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

[第4回　小数点を正しく入力できるように改善しよう](https://qiita.com/rikimaru914/items/61154567fa02f1d7a156)

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

[第5回　演算記号を連続して押した時の不具合を直そう](https://qiita.com/rikimaru914/items/21b3e4532f0de41db9a6)

[第6回　バックスペースを押した時の不具合を直そう。](https://qiita.com/rikimaru914/items/0a97bfa685620f16cd5b)

[第7回　「4 ÷ 3 = 1.33333333333333333」の表示桁数を10桁にしたい](https://qiita.com/rikimaru914/items/c3f23aa65f4be780d6ff)

[第8回　「電卓と同じ表示画面を目指そう](https://qiita.com/rikimaru914/items/b4076b2673014034076c)


#レベル１のイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/28e200d6-555f-76c6-86f5-f2cea6a3ab9d.png)

#HTML
```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の出力結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/279ca855-36e6-3983-1ec8-14761575ee78.png)

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

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




```css
.container {
  width: 200px;
  margin: 50px auto;
  border: 2px solid black;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/435f243f-aaef-1737-3170-f52db9e1bb81.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/34dce583-acff-9a0a-f57b-b7eecd1973d3.png)

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

```css
.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の黒の枠線

```css
.input {
  width:200px;
  border: 2px solid black; 
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/6f1a61e8-d356-bbf5-2b71-ecf52b154783.png)


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

```css
.row {
  display: flex;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/a7b8d306-7894-2614-ca8d-474417f14253.png)

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

```css
.row {
  display: flex;
  justify-content: space-between;
}
```
【均等配置 】
justify-content: space-between; 
とすると、各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せることができる。
[MDNのjustify-contentの解説](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/d26b4a0d-2c45-a2d0-ace9-ad47f02167d4.png)

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

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


```css
.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 
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/7c43ae84-e5b2-efd2-34bb-9551bdccc3c5.png)

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

```css
.num_bth, #clear, #equal_btn{
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30%;
  background: lightgray;
  cursor: pointer;
  margin: 5px;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320736/0a2d6c3a-5ddb-5b36-4c97-2522057e81b5.png)

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

```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で計算をしていきたいと思います。