計算機を作る
きっかけ
前回作った四則演算に加えて、実際にあるような計算機を作りたくなった。
ざっくりとした構想
part2の「今後の構想」は、一旦忘れて計算機の見た目を作る
0~9までの数字ボタンでテキスト入力が行えるようにする
四則演算が行えるようにする。(未実装)
完成物(スクリーンショット)
上のテキスト入力欄に数字ボタンで入力するところまで出来た。
サンプルコード
HTML
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="css/caluculate.css"><title>計算機</title></head><body><divclass="caluculate"><divclass="wrapper"><inputid="number-text"type="text"></div><divid="btns"><divid="num-btns"><buttonvalue="7"name="num"onclick="clickBtn(this)">7</button><buttonvalue="8"name="num"onclick="clickBtn(this)">8</button><buttonvalue="9"name="num"onclick="clickBtn(this)">9</button><buttonvalue="4"name="num"onclick="clickBtn(this)">4</button><buttonvalue="5"name="num"onclick="clickBtn(this)">5</button><buttonvalue="6"name="num"onclick="clickBtn(this)">6</button><buttonvalue="1"name="num"onclick="clickBtn(this)">1</button><buttonvalue="2"name="num"onclick="clickBtn(this)">2</button><buttonvalue="3"name="num"onclick="clickBtn(this)">3</button><buttonvalue="0"name="num"onclick="clickBtn(this)">0</button><buttonid="eq"value="="name="symbol">=</button></div><divid="symbol-btns"><buttonvalue="+"name="symbol">+</button><buttonvalue="-"name="symbol">-</button><buttonvalue="*"name="symbol">*</button><buttonvalue="/"name="symbol">/</button></div></div></div><script src="js/caluculate.js"></script></body></html>
CSS
*{margin:0;padding:0;}.caluculate{margin:100pxauto;}.wrapper{width:300px;margin:0auto;}.wrapper>#number-text{width:293px;height:54px;margin-bottom:5px;font-size:48px;/* 右から左へ入力するためのスタイル */text-align:right;}#btns{width:300px;display:flex;margin:auto;}button{width:65px;height:57px;}#num-btns{margin:5px;}#num-btns>button{margin-bottom:5px;font-size:24px;}#num-btns>button:last-child{width:136px;}#symbol-btns{height:228px;display:flex;flex-direction:column;display:inline-block;margin-top:5px;}#symbol-btns>button{margin-bottom:5px;height:57px;font-size:24px;text-align:center;}
Javascript
varnumber=document.getElementById('number-text');functionclickBtn(num){number.value=number.value+num.value;};
参考サイト
電卓の作り方など
JavaScript を使った「電卓Webアプリ」の作り方を中３の息子に教えてみた！（プログラミング初心者向け）
JavaScriptで電卓プログラムを作成する方法を現役エンジニアが解説【初心者向け】
CSS関連
CSSで画像を縦に並べる方法を現役デザイナーが解説【初心者向け】
【CSS】widthとheightの解説！効かない時の解消法
js関連
要素をクリックで処理開始! JavaScriptのonclickでイベントを指定
JavaScriptのquerySelectorAllメソッドの使い方を現役エンジニアが解説【初心者向け】
エラー関連
JavaScriptで「Unexpected token」というエラーが出る原因と対処法を現役エンジニアが解説【初心者向け】
今後の機能に関連
テキストボックスに入力された値を取得する - JavaScript プログラミング
今後の構想
・四則演算機能の追加
（最優先）
・クリアボタンと小数点ボタンの追加
（ボタン配置に苦戦すると思われる）
・クリアボタンでテキストボックスの値をリセットする機能
・入力できる文字列や文字数などの制限
・記号入力は、ボタン切り替え機能を使って計算したい。要は、iphoneの電卓を想定
テキストボックスには記号は入力せず、内部的に入力する。
記号に文字数を使うと、長い桁になったときに足りなくなるし、見辛そうなので。
（テキストボックス表示例：「1」→(+ボタンを押す)→「1」→(=ボタンを押す)→「2」）
・計算結果をリストに追加していく機能
（複数の計算があったとき用のメモ代わり）
・計算結果リストの編集ができる機能
(作れそうなら作ってみる)
ボタン切り替え機能と計算結果をリストに追加していく機能は、以前作ることができたので、今回のコードにも組み込んでいく。