カテゴリー: Javascript

Javascript 迷路

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>My Maze</title>
</head>

<body>
    <canvas>
        Canvas not supported ...
    </canvas>

    <script src="js/main.js"></script>
</body>

</html>

main.js

'use strict';

(() => {
    class MazeRenderer {
        constructor(canvas) {
            this.ctx = canvas.getContext('2d');
            this.WALL_SIZE = 10;
        }

        render(data) {
            canvas.height = data.length * this.WALL_SIZE;
            canvas.width = data[0].length * this.WALL_SIZE;

            for (let row = 0; row < data.length; row++) {
                for (let col = 0; col < data[0].length; col++) {
                    if (data[row][col] === 1) {
                        this.ctx.fillRect(
                            col * this.WALL_SIZE,
                            row * this.WALL_SIZE,
                            this.WALL_SIZE,
                            this.WALL_SIZE
                        );
                    }
                }
            }
        }
    }

    class Maze {
        constructor(row, col, renderer) {
            if (row < 5 || col < 5 || row % 2 === 0 || col % 2 === 0) {
                alert('Size not valid!');
                return;
            }

            this.renderer = renderer;
            this.row = row;
            this.col = col;
            this.data = this.getData();
        }

        getData() {
            const data = [];

            for (let row = 0; row < this.row; row++) {
                data[row] = [];
                for (let col = 0; col < this.col; col++) {
                    data[row][col] = 1;
                }
            }

            for (let row = 1; row < this.row - 1; row++) {
                for (let col = 1; col < this.col - 1; col++) {
                    data[row][col] = 0;
                }
            }

            for (let row = 2; row < this.row - 2; row += 2) {
                for (let col = 2; col < this.col - 2; col += 2) {
                    data[row][col] = 1;
                }
            }

            for (let row = 2; row < this.row - 2; row += 2) {
                for (let col = 2; col < this.col - 2; col += 2) {
                    let destRow;
                    let destCol;

                    do {
                        const dir = row === 2 ?
                            Math.floor(Math.random() * 4) :
                            Math.floor(Math.random() * 3) + 1;
                        switch (dir) {
                            case 0: // up
                                destRow = row - 1;
                                destCol = col;
                                break;
                            case 1: // down
                                destRow = row + 1;
                                destCol = col;
                                break;
                            case 2: // left
                                destRow = row;
                                destCol = col - 1;
                                break;
                            case 3: // right
                                destRow = row;
                                destCol = col + 1;
                                break;
                        }
                    } while (data[destRow][destCol] === 1);

                    data[destRow][destCol] = 1;
                }
            }

            return data;
        }

        render() {
            this.renderer.render(this.data);
        }
    }

    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
        return;
    }

    const maze = new Maze(21, 15, new MazeRenderer(canvas));
    maze.render();
})();

MyCarousel

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Carousel</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section class="carousel">
        <div class="container">
            <ul>
                <li><img src="img/pic1.png"></li>
                <li><img src="img/pic2.png"></li>
                <li><img src="img/pic3.png"></li>
                <li><img src="img/pic4.png"></li>
            </ul>

            <button id="prev">&laquo;</button>
            <button id="next">&raquo;</button>
        </div>

        <nav>
        </nav>
    </section>

    <script src="js/main.js"></script>
</body>

</html>

js/main.js

'use strict';

{
    const next = document.getElementById('next');
    const prev = document.getElementById('prev');
    const ul = document.querySelector('ul');
    const slides = ul.children;
    const dots = [];
    let currentIndex = 0;

    function updateButtons() {
        prev.classList.remove('hidden');
        next.classList.remove('hidden');

        if (currentIndex === 0) {
            prev.classList.add('hidden');
        }
        if (currentIndex === slides.length - 1) {
            next.classList.add('hidden');
        }
    }

    function moveSlides() {
        const slideWidth = slides[0].getBoundingClientRect().width;
        ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;
    }

    function setupDots() {
        for (let i = 0; i < slides.length; i++) {
            const button = document.createElement('button');
            button.addEventListener('click', () => {
                currentIndex = i;
                updateDots();
                updateButtons();
                moveSlides();
            });
            dots.push(button);
            document.querySelector('nav').appendChild(button);
        }

        dots[0].classList.add('current');
    }

    function updateDots() {
        dots.forEach(dot => {
            dot.classList.remove('current');
        });
        dots[currentIndex].classList.add('current');
    }

    updateButtons();
    setupDots();

    next.addEventListener('click', () => {
        currentIndex++;
        updateButtons();
        updateDots();
        moveSlides();
    });

    prev.addEventListener('click', () => {
        currentIndex--;
        updateButtons();
        updateDots();
        moveSlides();
    });

    window.addEventListener('resize', () => {
        moveSlides();
    });
}

css/style.css

.carousel {
    width: 80%;
    margin: 16px auto;
}

.container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    transition: transform .3s;
}

li {
    height: 100%;
    min-width: 100%;
}

li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#prev,
#next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 24px;
    padding: 0 8px 4px;
    cursor: pointer;
}

#prev:hover,
#next:hover {
    opacity: .8;
}

#prev {
    left: 0;
}

#next {
    right: 0;
}

.hidden {
    display: none;
}

nav {
    margin-top: 16px;
    text-align: center;
}

nav button+button {
    margin-left: 8px;
}

nav button {
    border: none;
    width: 16px;
    height: 16px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
}

nav .current {
    background: #999;
}

JavaScriptモーダルウィンドウ

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Modal Window</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div id="open">
        詳細を見る
    </div>

    <div id="mask" class="hidden"></div>

    <section id="modal" class="hidden">
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
        <div id="close">
            閉じる
        </div>
    </section>

    <script src="js/main.js"></script>
</body>

</html>

css/style.css

body {
    font-size: 14px;
}

#open,
#close {
    cursor: pointer;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    padding: 12px 0;
    margin: 16px auto 0;
}

#mask {
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

#modal {
    background: #fff;
    width: 300px;
    padding: 20px;
    border-radius: 4px;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: transform 0.4s;
    z-index: 2;
}

#modal>p {
    margin: 0 0 20px;
}

#mask.hidden {
    display: none;
}

#modal.hidden {
    transform: translate(0, -500px);
}

/js/main.js

'use strict';

{
    const open = document.getElementById('open');
    const close = document.getElementById('close');
    const modal = document.getElementById('modal');
    const mask = document.getElementById('mask');

    open.addEventListener('click', () => {
        modal.classList.remove('hidden');
        mask.classList.remove('hidden');
    });

    close.addEventListener('click', () => {
        modal.classList.add('hidden');
        mask.classList.add('hidden');
    });

    mask.addEventListener('click', () => {
        // modal.classList.add('hidden');
        // mask.classList.add('hidden');
        close.click();
    });
}

MyTabMenu

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Tab Menu</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="container">
        <ul class="menu">
            <li><a href="#" class="active" data-id="about">サイトの概要</a></li>
            <li><a href="#" data-id="service">サービス内容</a></li>
            <li><a href="#" data-id="contact">お問い合わせ</a></li>
        </ul>

        <section class="content active" id="about">
            サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。
        </section>

        <section class="content" id="service">
            サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。
        </section>

        <section class="content" id="contact">
            お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。
        </section>
    </div>

    <script src="js/main.js"></script>
</body>

</html>

css/styles.css

body {
    font-size: 14px;
}

.container {
    margin: 30px auto;
    width: 500px;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.menu li a {
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

.menu li a.active {
    background: #333;
    color: #fff;
}

.menu li a:not(.active):hover {
    opacity: 0.5;
    transition: opacity 0.4s;
}

.content.active {
    background: #333;
    color: #fff;
    min-height: 150px;
    padding: 12px;
    display: block;
}

.content {
    display: none;
}

js/main.js

'use strict';

{
    const menuItems = document.querySelectorAll('.menu li a');
    const contents = document.querySelectorAll('.content');

    menuItems.forEach(clickedItem => {
        clickedItem.addEventListener('click', e => {
            e.preventDefault();

            menuItems.forEach(item => {
                item.classList.remove('active');
            });
            clickedItem.classList.add('active');

            contents.forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(clickedItem.dataset.id).classList.add('active');
        });
    });
}

MyHamburgerMenu

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>FAQ</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h1>FAQ</h1>
  <dl>
    <div>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </div>
    <div>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </div>
    <div>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </div>
  </dl>

  <script src="js/main.js"></script>
</body>

</html>

style.css

h1 {
    font-size: 18px;
    border-bottom: 1px solid;
    padding: 8px 16px;
    margin-bottom: 16px;
}

dl {
    margin: 0;
}

dl>div {
    margin-bottom: 8px;
}

dt {
    padding: 8px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

dt::before {
    content: 'Q. ';
}

dt::after {
    content: '+';
    position: absolute;
    top: 8px;
    right: 16px;
    transition: transform .3s;
}

dl>div.appear dt::after {
    transform: rotate(45deg);
}

dd {
    padding: 8px;
    margin: 0;
    display: none;
}

dd::before {
    content: 'A .';
}

dl>div.appear dd {
    display: block;
    animation: .3s fadeIn;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

main.js

'use strict';

{
  const dts = document.querySelectorAll('dt');

  dts.forEach(dt => {
    dt.addEventListener('click', () => {
      dt.parentNode.classList.toggle('appear');
    });
  });
}

Javascript RPG

1
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Epic RPG</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    #game-log {
      background: #f4f4f4;
      padding: 10px;
      margin-bottom: 20px;
      height: 200px;
      overflow-y: auto;
      border: 1px solid #ddd;
    }
    button {
      margin: 5px;
      padding: 10px;
    }
    #player-stats {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <h1>Epic RPG</h1>
  <div id="player-stats">
    <p><strong>Name:</strong> <span id="player-name">Hero</span></p>
    <p><strong>HP:</strong> <span id="player-hp">100</span>/<span id="player-max-hp">100</span></p>
    <p><strong>MP:</strong> <span id="player-mp">50</span>/<span id="player-max-mp">50</span></p>
    <p><strong>Level:</strong> <span id="player-level">1</span></p>
    <p><strong>EXP:</strong> <span id="player-exp">0</span>/100</p>
    <p><strong>Gold:</strong> <span id="player-gold">0</span></p>
    <p><strong>Inventory:</strong> <span id="player-inventory">Potion x1</span></p>
    <p><strong>Skills:</strong> <span id="player-skills">Fireball</span></p>
    <p><strong>Equipped Weapon:</strong> <span id="player-weapon">None</span></p>
    <p><strong>Equipped Armor:</strong> <span id="player-armor">None</span></p>
    <p><strong>Current Quest:</strong> <span id="player-quest">None</span></p>
    <p><strong>Stage:</strong> <span id="current-stage">1</span></p>
  </div>
  <div id="game-log"></div>
  <button onclick="attack()">Attack</button>
  <button onclick="useSkill()">Use Skill</button>
  <button onclick="heal()">Heal</button>
  <button onclick="openShop()">Shop</button>
  <button onclick="acceptQuest()">Quest</button>
  <button onclick="craftItem()">Craft Item</button>
  <button onclick="nextStage()">Next Stage</button>
  <button onclick="restart()">Restart</button>
  <script>
    // プレイヤーと敵のデータ
    let player = {
      name: "Hero",
      hp: 100,
      maxHp: 100,
      mp: 50,
      maxMp: 50,
      attackPower: 10,
      defense: 5,
      exp: 0,
      level: 1,
      gold: 50,
      inventory: ["Potion", "Iron Ore"],
      skills: ["Fireball"],
      weapon: null,
      armor: null,
      quest: null,
      stage: 1,
    };

    let enemy = {
      name: "Goblin",
      hp: 50,
      maxHp: 50,
      attackPower: 8,
      defense: 3,
    };

    const quests = [
      { name: "Defeat 3 Goblins", progress: 0, goal: 3, reward: 100 },
      { name: "Collect 2 Potions", progress: 0, goal: 2, reward: 50 },
    ];

    const stages = [
      { stage: 1, description: "The Forest of Beginnings", enemies: ["Goblin", "Orc"] },
      { stage: 2, description: "The Cursed Mines", enemies: ["Dark Bat", "Skeleton"] },
      { stage: 3, description: "The Dragon's Lair", enemies: ["Fire Dragon"] },
    ];

    // ゲームログ表示関数
    function log(message) {
      const logDiv = document.getElementById("game-log");
      logDiv.innerHTML += `<p>${message}</p>`;
      logDiv.scrollTop = logDiv.scrollHeight;
    }

    // プレイヤーの攻撃
    function attack() {
      const damage = Math.max(Math.floor(Math.random() * player.attackPower) - enemy.defense, 1);
      enemy.hp -= damage;
      log(`You attack the ${enemy.name} for ${damage} damage!`);
      if (enemy.hp <= 0) {
        log(`You defeated the ${enemy.name}!`);
        gainExp(20);
        gainGold(Math.floor(Math.random() * 20) + 10);
        updateQuestProgress("Defeat 3 Goblins");
        spawnNewEnemy();
        return;
      }
      enemyAttack();
    }

    // 敵の攻撃
    function enemyAttack() {
      const damage = Math.max(Math.floor(Math.random() * enemy.attackPower) - player.defense, 0);
      player.hp -= damage;
      log(`The ${enemy.name} attacks you for ${damage} damage! Current HP: ${player.hp}`);
      if (player.hp <= 0) {
        log("You have been defeated...");
        log("Press 'Restart' to try again.");
      }
      updateStats();
    }

    // ステージ移動
    function nextStage() {
      player.stage++;
      const currentStage = stages.find(stage => stage.stage === player.stage);
      if (!currentStage) {
        log("Congratulations! You have completed the game!");
        return;
      }
      log(`You enter the ${currentStage.description}.`);
      spawnNewEnemy();
      updateStats();
    }

    // 新しい敵を生成
    function spawnNewEnemy() {
      const currentStage = stages.find(stage => stage.stage === player.stage);
      const randomEnemyName = currentStage.enemies[Math.floor(Math.random() * currentStage.enemies.length)];
      enemy = {
        name: randomEnemyName,
        hp: Math.floor(Math.random() * 30 + 50),
        maxHp: Math.floor(Math.random() * 30 + 50),
        attackPower: Math.floor(Math.random() * 5 + 10),
        defense: Math.floor(Math.random() * 5),
      };
      log(`A wild ${enemy.name} appears with ${enemy.hp} HP!`);
    }

    // アイテムクラフト
    function craftItem() {
      if (player.inventory.includes("Iron Ore")) {
        player.inventory.splice(player.inventory.indexOf("Iron Ore"), 1);
        player.weapon = "Iron Sword";
        player.attackPower += 5;
        log("You crafted an Iron Sword! Attack power increased by 5.");
      } else {
        log("You don't have the required materials to craft an item.");
      }
      updateStats();
    }

    // ステータス更新
    function updateStats() {
      document.getElementById("player-name").innerText = player.name;
      document.getElementById("player-hp").innerText = player.hp;
      document.getElementById("player-max-hp").innerText = player.maxHp;
      document.getElementById("player-mp").innerText = player.mp;
      document.getElementById("player-max-mp").innerText = player.maxMp;
      document.getElementById("player-level").innerText = player.level;
      document.getElementById("player-exp").innerText = player.exp;
      document.getElementById("player-gold").innerText = player.gold;
      document.getElementById("player-inventory").innerText = player.inventory.join(", ") || "Empty";
      document.getElementById("player-skills").innerText = player.skills.join(", ") || "None";
      document.getElementById("player-weapon").innerText = player.weapon || "None";
      document.getElementById("player-armor").innerText = player.armor || "None";
      document.getElementById("player-quest").innerText = player.quest ? player.quest.name : "None";
      document.getElementById("current-stage").innerText = player.stage;
    }

    // 初期化
    log("Welcome to the RPG! A Goblin appears!");
    updateStats();
    spawnNewEnemy();
  </script>
</body>
</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
  </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln">
  </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln">
  </span><span class="tag"><title></span><span class="pln">高度なコード比較サイト</span><span class="tag"></title></span><span class="pln">
  </span><span class="tag"><style></span><span class="pln">
    body </span><span class="pun">{</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f4f4f4;</span><span class="pln">
      margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln">
      width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">90</span><span class="pun">%;</span><span class="pln">
      max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">900px</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln">
      box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">);</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    h1 </span><span class="pun">{</span><span class="pln">
      text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#333;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">code</span><span class="pun">-</span><span class="pln">input </span><span class="pun">{</span><span class="pln">
      display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln">
      justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">between</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      gap</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    textarea </span><span class="pun">{</span><span class="pln">
      width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">48</span><span class="pun">%;</span><span class="pln">
      height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> monospace</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">14px</span><span class="pun">;</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
      resize</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f9f9f9;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">buttons </span><span class="pun">{</span><span class="pln">
      display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln">
      justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln">
      gap</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    button </span><span class="pun">{</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007BFF;</span><span class="pln">
      color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln">
      border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
      cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln">
      background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#0056b3;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="com">#result {</span><span class="pln">
      white</span><span class="pun">-</span><span class="pln">space</span><span class="pun">:</span><span class="pln"> pre</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> monospace</span><span class="pun">;</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f8f9fa;</span><span class="pln">
      padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
      border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd;</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">
      max</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln">
      overflow</span><span class="pun">-</span><span class="pln">y</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">highlight </span><span class="pun">{</span><span class="pln">
      background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffcccc;</span><span class="pln">
      font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln">
      color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#d9534f;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="pun">.</span><span class="pln">line </span><span class="pun">{</span><span class="pln">
      border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="pln">
      padding</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
      margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="tag"></style></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
  </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><span class="pln">
    </span><span class="tag"><h1></span><span class="pln">高度なコード比較ツール</span><span class="tag"></h1></span><span class="pln">
    </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"code-input"</span><span class="tag">></span><span class="pln">
      </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"code1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"コード1を入力..."</span><span class="tag">></textarea></span><span class="pln">
      </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"code2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"コード2を入力..."</span><span class="tag">></textarea></span><span class="pln">
    </span><span class="tag"></div></span><span class="pln">
    </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"buttons"</span><span class="tag">></span><span class="pln">
      </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">compareCodes</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">比較する</span><span class="tag"></button></span><span class="pln">
      </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">clearFields</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">クリア</span><span class="tag"></button></span><span class="pln">
    </span><span class="tag"></div></span><span class="pln">
    </span><span class="tag"><h3></span><span class="pln">比較結果</span><span class="tag"></h3></span><span class="pln">
    </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"result"</span><span class="tag">></span><span class="pln">
      </span><span class="com"><!-- 結果表示エリア --></span><span class="pln">
    </span><span class="tag"></div></span><span class="pln">
  </span><span class="tag"></div></span><span class="pln">
  </span><span class="tag"><script></span><span class="pln">
    </span><span class="kwd">function</span><span class="pln"> compareCodes</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">const</span><span class="pln"> code1 </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code1'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">.</span><span class="pln">split</span><span class="pun">(</span><span class="str">'\n'</span><span class="pun">);</span><span class="pln">
      </span><span class="kwd">const</span><span class="pln"> code2 </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code2'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">.</span><span class="pln">split</span><span class="pun">(</span><span class="str">'\n'</span><span class="pun">);</span><span class="pln">
      </span><span class="kwd">const</span><span class="pln"> resultContainer </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'result'</span><span class="pun">);</span><span class="pln">
      resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
 
      </span><span class="kwd">const</span><span class="pln"> maxLength </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="pln">code1</span><span class="pun">.</span><span class="pln">length</span><span class="pun">,</span><span class="pln"> code2</span><span class="pun">.</span><span class="pln">length</span><span class="pun">);</span><span class="pln">
 
      </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">let</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> maxLength</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">const</span><span class="pln"> line1 </span><span class="pun">=</span><span class="pln"> code1</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">const</span><span class="pln"> line2 </span><span class="pun">=</span><span class="pln"> code2</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">const</span><span class="pln"> lineClass </span><span class="pun">=</span><span class="pln"> line1 </span><span class="pun">!==</span><span class="pln"> line2 </span><span class="pun">?</span><span class="pln"> </span><span class="str">'highlight'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
 
        resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">+=</span><span class="pln"> </span><span class="pun">`</span><span class="pln">
          </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"line"</span><span class="pun">></span><span class="pln">
            </span><span class="pun"><</span><span class="pln">strong</span><span class="pun">>行</span><span class="pln"> $</span><span class="pun">{</span><span class="pln">i </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">}:</</span><span class="pln">strong</span><span class="pun">></span><span class="pln">
            </span><span class="pun"><</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"${lineClass}"</span><span class="pun">>コード</span><span class="lit">1</span><span class="pun">:</span><span class="pln"> </span><span class="str">"${line1}"</span><span class="pun"></</span><span class="pln">span</span><span class="pun">></span><span class="pln"> </span><span class="pun">|</span><span class="pln">
            </span><span class="pun"><</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"${lineClass}"</span><span class="pun">>コード</span><span class="lit">2</span><span class="pun">:</span><span class="pln"> </span><span class="str">"${line2}"</span><span class="pun"></</span><span class="pln">span</span><span class="pun">></span><span class="pln">
          </span><span class="pun"></</span><span class="pln">div</span><span class="pun">>`;</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
 
      </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">resultContainer</span><span class="pun">.</span><span class="pln">innerHTML</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">())</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">'<div>コードに違いはありません。</div>'</span><span class="pun">;</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
 
    </span><span class="kwd">function</span><span class="pln"> clearFields</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code1'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
      document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code2'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
      document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'result'</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="tag"></script></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高度なコード比較サイト</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 90%;
      max-width: 900px;
      margin: 20px auto;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 5px;
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .code-input {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      gap: 10px;
    }

    textarea {
      width: 48%;
      height: 300px;
      font-family: monospace;
      font-size: 14px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      resize: none;
      background-color: #f9f9f9;
    }

    .buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    button {
      padding: 10px 20px;
      background: #007BFF;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background: #0056b3;
    }

    #result {
      white-space: pre-wrap;
      font-family: monospace;
      background-color: #f8f9fa;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      max-height: 300px;
      overflow-y: auto;
    }

    .highlight {
      background-color: #ffcccc;
      font-weight: bold;
      color: #d9534f;
    }

    .line {
      border-left: 4px solid #ccc;
      padding-left: 10px;
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>高度なコード比較ツール</h1>
    <div class="code-input">
      <textarea id="code1" placeholder="コード1を入力..."></textarea>
      <textarea id="code2" placeholder="コード2を入力..."></textarea>
    </div>
    <div class="buttons">
      <button onclick="compareCodes()">比較する</button>
      <button onclick="clearFields()">クリア</button>
    </div>
    <h3>比較結果</h3>
    <div id="result">
      <!-- 結果表示エリア -->
    </div>
  </div>
  <script>
    function compareCodes() {
      const code1 = document.getElementById('code1').value.split('\n');
      const code2 = document.getElementById('code2').value.split('\n');
      const resultContainer = document.getElementById('result');
      resultContainer.innerHTML = '';

      const maxLength = Math.max(code1.length, code2.length);

      for (let i = 0; i < maxLength; i++) {
        const line1 = code1[i] || '';
        const line2 = code2[i] || '';
        const lineClass = line1 !== line2 ? 'highlight' : '';

        resultContainer.innerHTML += `
          <div class="line">
            <strong>行 ${i + 1}:</strong>
            <span class="${lineClass}">コード1: "${line1}"</span> |
            <span class="${lineClass}">コード2: "${line2}"</span>
          </div>`;
      }

      if (!resultContainer.innerHTML.trim()) {
        resultContainer.innerHTML = '<div>コードに違いはありません。</div>';
      }
    }

    function clearFields() {
      document.getElementById('code1').value = '';
      document.getElementById('code2').value = '';
      document.getElementById('result').innerHTML = '';
    }
  </script>
</body>
</html>

node-js todo-list

Node.js での Todo リストの基本的なファイル構造と実装例を示します。

ファイル構造

javaコードをコピーする/todo-app
  ├── /node_modules    // npmパッケージ
  ├── /public          // 静的ファイル（CSS, JSなど）
  │   └── style.css
  ├── /views           // テンプレートファイル（HTML, EJSなど）
  │   └── index.ejs
  ├── /routes          // ルーティングファイル
  │   └── todos.js
  ├── app.js           // メインのアプリケーションファイル
  ├── package.json     // npmパッケージ設定ファイル
  └── README.md        // 説明書

1. package.json

jsonコードをコピーする{
  "name": "todo-app",
  "version": "1.0.0",
  "description": "Simple Todo app with Node.js",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.18.0",
    "ejs": "^3.1.6",
    "body-parser": "^1.19.0"
  }
}

2. app.js

jsコードをコピーするconst express = require('express');
const bodyParser = require('body-parser');
const app = express();
const todoRoutes = require('./routes/todos');

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.use('/', todoRoutes);

app.listen(3000, () => {
  console.log('Todo app running on port 3000');
});

3. routes/todos.js

jsコードをコピーするconst express = require('express');
const router = express.Router();

let todos = [];

router.get('/', (req, res) => {
  res.render('index', { todos });
});

router.post('/add', (req, res) => {
  const newTodo = req.body.todo;
  if (newTodo) {
    todos.push(newTodo);
  }
  res.redirect('/');
});

router.post('/delete/:index', (req, res) => {
  const index = req.params.index;
  if (index >= 0 && index < todos.length) {
    todos.splice(index, 1);
  }
  res.redirect('/');
});

module.exports = router;

4. views/index.ejs

htmlコードをコピーする<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo App</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>Todo List</h1>
  <form action="/add" method="POST">
    <input type="text" name="todo" placeholder="Add a new task" required>
    <button type="submit">Add</button>
  </form>
  <ul>
    <% todos.forEach((todo, index) => { %>
      <li>
        <%= todo %> 
        <form action="/delete/<%= index %>" method="POST" style="display:inline;">
          <button type="submit">Delete</button>
        </form>
      </li>
    <% }) %>
  </ul>
</body>
</html>

5. public/style.css

cssコードをコピーするbody {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 {
  margin-top: 20px;
}

form {
  margin-bottom: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin-left: 10px;
}

このコードは、Node.js を使用してシンプルな Todo リストを作成する基本構造を示しています。 express フレームワークを使ってルーティングを行い、 ejs を使ってテンプレートを表示しています。

4o

あなた:

コマンド

ChatGPT:

ChatGPT

以下は、Node.js での Todo リストアプリを実行するためのコマンドの手順です。

1. プロジェクトの初期化

最初に新しいプロジェクトフォルダを作成し、その中でプロジェクトを初期化します。

bashコードをコピーするmkdir todo-app
cd todo-app
npm init -y

npm init -y で package.json ファイルが自動生成されます。

2. 必要なパッケージのインストール

express, ejs, body-parser などの必要なパッケージをインストールします。

bashコードをコピーするnpm install express ejs body-parser

3. アプリケーションの起動

app.js を実行して、アプリケーションを起動します。

bashコードをコピーするnode app.js

このコマンドを実行後、ブラウザで http://localhost:3000 にアクセスして Todo リストアプリを確認できます。

4. 開発中に自動的に再起動させたい場合 (オプション)

開発中に変更を加えるたびにサーバーを自動的に再起動させたい場合は、nodemon を使用すると便利です。

bashコードをコピーするnpm install -g nodemon
nodemon app.js

nodemon を使うと、コードを変更するたびにサーバーが自動でリスタートします。

確認事項

  1. コマンドはプロジェクトディレクトリ内で実行してください。
  2. ブラウザから http://localhost:3000 へアクセスして動作確認ができます。

Javascript 四角を描画

'use strict';

{
  function draw() {
    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
      return;
    }
    const ctx = canvas.getContext('2d');

    // ctx.fillRect(50, 50, 50, 50);
    ctx.strokeRect(50, 50, 50, 50);
  }

  draw();
}
body {
  background: #222;
}

canvas {
  background: #fff;
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Canvas</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <canvas width="600" height="240">
    Canvas not supported.
  </canvas>

  <script src="js/main.js"></script>
</body>
</html>

Javascript 日時を更新してみよう

main.js

'use strict';

{
    // 2000 4 11
    // const d = new Date(2000, 3, 11);
    // 2000 2 ??
    const d = new Date(2000, 3, 0);
    d.setDate(d.getDate() + 100);


    console.log(d.toLocaleString());
}

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My JavaScript</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>