全人類を笑顔にするゲーム

このゲームは、全人類を笑顔にすることを目的としています。

ルールは簡単です。

自分が思い浮かぶ、面白いジョークを入力してください。
他の人が入力したジョークを読み、面白いと思ったら「いいね！」を押してください。
一番「いいね！」がついたジョークが優勝です。

さあ、全人類が笑顔になるジョークを投稿しましょう！

投稿されたジョーク一覧

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>全人類を笑顔にするゲーム</title>
  </head>
  <body>
    <h1>全人類を笑顔にするゲーム</h1>
    <p>このゲームは、全人類を笑顔にすることを目的としています。</p>
    <p>ルールは簡単です。</p>
    <ol>
      <li>自分が思い浮かぶ、面白いジョークを入力してください。</li>
      <li>他の人が入力したジョークを読み、面白いと思ったら「いいね！」を押してください。</li>
      <li>一番「いいね！」がついたジョークが優勝です。</li>
    </ol>
    <p>さあ、全人類が笑顔になるジョークを投稿しましょう！</p>
    <form>
      <label>ジョークを入力してください：</label>
      <input type="text" id="joke">
      <button type="button" onclick="postJoke()">投稿する</button>
    </form>
    <h2>投稿されたジョーク一覧</h2>
    <ul id="jokeList"></ul>
    <script>
      let jokes = [];
      function postJoke() {
        const joke = document.getElementById('joke').value.trim();
        if (joke) {
          jokes.push({ joke: joke, likes: 0 });
          renderJokes();
          document.getElementById('joke').value = '';
        }
      }
      function renderJokes() {
        const jokeList = document.getElementById('jokeList');
        jokeList.innerHTML = '';
        jokes.forEach(function(joke, i) {
          const li = document.createElement('li');
          const p = document.createElement('p');
          const button = document.createElement('button');
          p.innerText = joke.joke;
          button.innerText = `${joke.likes} いいね！`;
          button.onclick = function() {
            jokes[i].likes++;
            renderJokes();
          }
          li.appendChild(p);
          li.appendChild(button);
          jokeList.appendChild(li);
        })
      }
    </script>
  </body>
</html>

※セキュリティ脆弱性があるevalや他のサイトへの遷移やリダイレクトは使用していないため、安全であると言えます。
※面白いジョークの例：「なぜ背が低い人は短気なのか？　それは、頭が高いところにないからだ。」