ここからは実際に開発をしていきます。 GitHub で空のリポジトリを作成し、developer-1 ブランチと developer-2 ブランチを作成します。

まず、開発者 1 について、コードを書いていきます。


作業するブランチは developer-1 です。

あらかじめ決めた条件を確認します。

  • 計算ロジックのファイル名は main.js
  • 数字を表示するエリアの id 属性は number-display
  • ボタンを押したときに実行する関数の名前は sendButtonInfo
  • sendButtonInfo の引数は以下の通り。

sendButtonInfo の引数(文字列型)

ボタン 引数
0 '0'
1 '1'
2 '2'
3 '3'
4 '4'
5 '5'
6 '6'
7 '7'
8 '8'
9 '9'
. '.'
'+'
'-'
× '*'
÷ '/'
= '='

これらをもとにして画面を作成します。

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<hr>
<div>
    <h2 id="number-display"></h2>
    <div>
        <div>
            <button onclick="sendButtonInfo('7');">7</button>
            <button onclick="sendButtonInfo('8');">8</button>
            <button onclick="sendButtonInfo('9');">9</button>
            <button onclick="sendButtonInfo('/');">÷</button>
        </div>
        <div>
            <button onclick="sendButtonInfo('4');">4</button>
            <button onclick="sendButtonInfo('5');">5</button>
            <button onclick="sendButtonInfo('6');">6</button>
            <button onclick="sendButtonInfo('*');">×</button>
        </div>
        <div>
            <button onclick="sendButtonInfo('1');">1</button>
            <button onclick="sendButtonInfo('2');">2</button>
            <button onclick="sendButtonInfo('3');">3</button>
            <button onclick="sendButtonInfo('-');">-</button>
        </div>
        <div>
            <button onclick="sendButtonInfo('0');">0</button>
            <button onclick="sendButtonInfo('.');">.</button>
            <button onclick="sendButtonInfo('=');">=</button>
            <button onclick="sendButtonInfo('+');">+</button>
        </div>
    </div>
</div>
<script src="main.js"></script>
</body>
</html>

これをコミットしておきます。


次回は開発者 2 のコードを書いていきます。