初めに
これは、前回書いた、「Tkinter で作成する超適当な電卓」にひき続くものです。link:https://qiita.com/chi1180/items/861d60d8fea59240dc9d
はい、今回は、「webで動かしたいぜ！」を基に作成しましょう！！
毎度のことながら、解説はコード内で適当にいたします。
今回のコードは前回とくらべ量もそれなりにあり、前提知識がそれなりに必要になってくるかと思いますが、なんでも大事なのは、「適当さ」です！…と、だれか言ってたきがする。
書いていこう！
それではコードを書いて行きましょう！
ちなみにですが、私はコードエディタは、cursor（綴りあってんのかな？）を使用しています。
うぇい。
HTML
HTMLのコードです。
そんなコメント書いてないし、わかんないこといっぱいですが、ググればなんとかなる！・・・ハズである。（！）。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超適当な電卓</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="text" class="input" id="input" readonly autocomplete="off">
<!-- input タグは、編集されちゃ困るので、"readonly" にしましょ -->
<div class="buttons" id="buttons"></div>
<!-- ここは、ボタンがくるところ♪ -->
</div>
<script src="script.js"></script>
</body>
</html>
CSS
CSSは、そのまま、スタイルきめてくぜい☆
今回のスタイル設定は、「ハッカーかいな」です。でも、やることはしょぼい（笑）。
style.css
* {
background-color: black;
color: green;
}
.container {
padding: 0 10px 20px 10px;
border: solid 2px green;
width: 250px;
margin: auto;
}
.input {
width: 240px;
height: 30px;
margin-top: 20px;
overflow: scroll;
}
.buttons {
margin-top: 20px;
display: grid;
grid-template-columns: 50px 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px;
}
button {
font-size: 1em;
cursor: pointer;
}
JavaScript
JavaScript。
はい、私は結構にJavaScritp好きですね！
初めに習得した言語ですし！（いや、日本語がしょっぱなか？）。
コメントは結構適当になってるので、意味なんじゃいってなれば、初めに記載したリンクの記事見てみるかして♪
script.js
const input = document.getElementById('input');
// 一先ず、inputタグを取得～♪
// 変数いろいろ作成～♪
let current = 0;
let term = 0;
let option = 1;
// ボタン（１～９）の作成
for (let c = 0; c < 3; c ++) {
for (let r = 0; r < 3; r ++) {
current ++;
const button = document.createElement('button');
button.innerText = current;
button.id = current;
button.style.gridColumn = r + 1;
button.style.gridRow = 3 - c;
document.getElementById('buttons').appendChild(button);
}
}
// オプションのボタン（足し引きとかさ）の作成
const buttons = ["+", "-", "*", "/"];
for (let i = 0; i < buttons.length; i ++) {
current ++;
const button = document.createElement('button');
button.innerText = buttons[i];
button.id = current;
button.style.gridColumn = 4;
button.style.gridRow = i + 1;
document.getElementById('buttons').appendChild(button);
}
// で、current を初期化
current = 0;
// 残り、他のボタンたちの作成
let button = document.createElement('button');
button.innerText = "0";
button.id = 0;
button.style.gridColumn = 1;
button.style.gridRow = 4;
document.getElementById('buttons').appendChild(button);
button = document.createElement('button');
button.innerText = "=";
button.id = 14;
button.style.gridColumn = 5;
button.style.gridRow = 3;
document.getElementById('buttons').appendChild(button);
button = document.createElement('button');
button.innerText = "C";
button.id = 15;
button.style.gridColumn = 5;
button.style.gridRow = 1;
button.style.color = "red";
document.getElementById('buttons').appendChild(button);
// ボタンが押されたことを察知（？）してする処理～♪
document.getElementById('buttons').addEventListener('click', (e) => {
const num = parseInt(e.target.id);
// ↑ これで、それぞれのボタンの番号が取得できた（わ～いです。）
// あとは、その num によって、処理を書いていく
if (num > 9) {
if (num < 14) {
option = num - 9;
// めんどくさいので、この式の意味は、前回書いた、「Tkinterでの超適当電卓」…みたいなタイトルのやつを読んでみてください♪
term = current;
current = 0;
}
if (num === 14) {
// [option]ごとに処理を書いてく♪
switch (option) {
case 1:
current = term + current;
break;
case 2:
current = term - current;
break;
case 3:
current = term * current;
break;
case 4:
current = term / current;
break;
}
}
// [C] が押された時の処理♪
if (num === 15) {
current = term = 0;
}
} else {
// 押されたのがナンバーだった時の処理
current = current * 10 + num;
}
input.value = current.toString();
});
最後に
以上です！
なんか、汚い。
だれか、もうちょっと綺麗にコードを書いて欲しいですね！
今回は以上です。
ちなみに、できたらこんなんになる…ハズ
