htmlで商品管理的な何かを作ってみた

# 初めに
今回は商品の管理プログラムみたいなものを作っていきます。
# ファイル構成
今回もhtmlファイル1つでできます。
# プログラムのコピペ
以下のコードをコピペしてください。
```html:main.html
<!DOCTYPE html>
<html lang="ja">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>商品管理プログラム</title>
     <style>
        header h2 {
            font-weight: normal; /* 正しいフォントの太さを指定 */
        }
        header {
            height: 100px;
            width: 100%;
            background-color: rgb(53, 52, 52);
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center; /* テキストを中央揃え */
            justify-content: center; /* テキストを中央揃え */
        }
        footer {
            height: 200px;
            width: 100%;
            background-color: rgb(53, 52, 52);
            color: white;
            display: flex;
            align-items: center; /* テキストを中央揃え */
            justify-content: center; /* テキストを中央揃え */
        }
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center; /* 中央揃え */
            justify-content: center; /* 中央揃え */
            text-align: center;
            margin: 0; /* マージンをリセット */
            font-family: Arial, sans-serif;
        }
        input[type="text"],
        input[type="number"] {
            height: 30px;
            width: 300px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
        button {
            height: 30px;
            width: 300px;
            background-color: rgb(52, 253, 69);
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: rgb(38, 201, 51);
        }
        .container {
            height: 500px;
            border: 1px solid black;
            width: 100%;
            overflow-y: scroll;
            margin-top: 20px;
            resize: both;
        }
     </style>
</head>
<body>
    <header>
        <h2>商品管理プログラム</h2>
    </header>
    <main>
        <p>商品を管理できるプログラム(リロードするとデータが消えます)</p>
        <select onchange="changediv()" id="changeselect">
            <option value="add">商品を追加</option>
            <option value="remove">商品を削除</option>
        </select>
        <div id="add">
        <p>商品名を入力</p>
        <input type="text" id="shouhinmei">
        <p>個数を入力</p>
        <input type="number" id="quantity">
        <p>商品タグを入力</p>
        <input type="text" id="contenttag">
        <p>内容を確認して追加</p>
        <button onclick="addByclass()">商品を追加</button>
        </div>
        <div id="remove" hidden>
            <p>削除する商品idの番号を入力</p>
            <input type="text" id="removeid">
            <p>ロボットでないことを確認するため'delete'と入力してください</p>
            <input type="text" id="verify_for_notRobot">
            <p>削除する商品を確認して削除</p>
            <button onclick="removeElement()">削除</button>
        </div>
        <div class="container" id="container"></div>
    </main>
    <footer>
        <!--ここにユーザー名などを書く 例:©2024 created by qqn5192-->
    </footer>

    <script>
        let i = 0;
        let d = document;
        let container = d.getElementById("container");
        let gname = d.getElementById('shouhinmei');
        let quantity = d.getElementById('quantity');
        let tags = d.getElementById('contenttag');
        let removeid = d.getElementById('removeid');
        let removeverify = d.getElementById('verify_for_notRobot');
        let changeselect = d.getElementById('changeselect');
        let d_add = d.getElementById('add');
        let d_remove = d.getElementById('remove');

        function addToContent() {
            if(gname.value && quantity.value && tags.value){
                let contentProperties = {
                    name: gname.value,
                    gquantity: quantity.value,
                    gtag: tags.value
                };
                return contentProperties;
            } else {
                alert("商品名、個数、商品タグのどれかが入力されていません。");
                return null;
            }
        }

        function addByclass() {
            let goodsInfo = addToContent();
            if (!goodsInfo) return;

            let appendElement = d.createElement('p');
            i++;
            appendElement.id = "id" + i;
            appendElement.textContent = "商品名:" + goodsInfo.name + "　個数:" + goodsInfo.gquantity + "　タグ:" + goodsInfo.gtag + "　商品id:" + appendElement.id;
            container.appendChild(appendElement);
        }

        function removeElement() {
            let idToRemove = removeid.value.trim();
            let verification = removeverify.value.trim();

            if (idToRemove && verification === 'delete') {
                let elementToRemove = d.getElementById(idToRemove);
                if (elementToRemove) {
                    elementToRemove.remove();
                } else {
                    alert("指定されたIDの商品が見つかりません。");
                }
            } else {
                alert("削除する商品IDと確認文字列を正しく入力してください。");
            }
            removeid.value = "";
            removeverify.value = "";
        }

        function changediv() {
            if (changeselect.value === "add") {
                d_add.hidden = false;
                d_remove.hidden = true;
            } else if (changeselect.value === "remove") {
                d_add.hidden = true;
                d_remove.hidden = false;
            }
        }
        window.onload = changediv;
    </script>
</body>
</html>
```
このプログラムは、商品の追加と削除に対応しています（サーバーと連携してないのでページを再読み込みするとデータが消えます。）
# 最後に
みなさん、いかがだったでしょうか。今回はhtmlで商品の管理プログラムのようなものを書きました。ちなみに今回もjavascriptの修正をGPTにやってもらいました。
それではまたお会いしましょう！