初めに

これは、前回書いた、「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();
});

最後に

以上です！
なんか、汚い。
だれか、もうちょっと綺麗にコードを書いて欲しいですね！
今回は以上です。

ちなみに、できたらこんなんになる…ハズ

HTML & CSS & JavaScript で作る「超適当な電卓」

初めに

書いていこう！

HTML

CSS

JavaScript

最後に