今日のひとこと

スタートを押してください
以下が実際のプログラムです。JavaScriptのevalや他のサイトへの遷移、リダイレクトは使用せず、セキュリティに配慮して実装しました。また、隠しジョークを取り入れました。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>今日のひとこと</title>
  <style>
    body {
      font-size: 24px;
      text-align: center;
    }

    #fortune-wrapper {
      margin-top: 50px;
      position: relative;
    }

    #fortune {
      width: 300px;
      height: 100px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0px 0px 10px #888888;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    #fortune p {
      margin: 0;
      font-weight: bold;
    }

    #reset-button {
      margin-top: 20px;
      font-size: 18px;
      padding: 10px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h1>今日のひとこと</h1>
  <div id="fortune-wrapper">
    <div id="fortune">
      <p>スタートを押してください</p>
    </div>
  </div>
  <button id="reset-button">リセット</button>

  <script>
    // 5つの言葉をランダムに生成する関数を定義
    function generateFortune() {
      const fortunes = ["愛", "友情", "金", "夢", "ハズレ"];
      const randomIndex = Math.floor(Math.random() * fortunes.length);
      return fortunes[randomIndex];
    }

    // 短冊をクリックしたときにランダムに言葉を表示する関数を定義
    function showFortune() {
      const fortune = generateFortune();
      this.innerText = fortune;
    }

    // 短冊の要素を取得し、クリックイベントを追加
    const fortuneElement = document.querySelector("#fortune");
    fortuneElement.addEventListener("click", showFortune);

    // リセットボタンをクリックしたときに短冊の文字を初期化する関数を定義
    function resetFortune() {
      fortuneElement.innerText = "スタートを押してください";
    }

    // リセットボタンにクリックイベントを追加
    const resetButton = document.querySelector("#reset-button");
    resetButton.addEventListener("click", resetFortune);

    // 隠しジョーク
    console.log("「ハズレ」という言葉を加えるのも一種のクリエイティビティだと思わないかい？");
  </script>
</body>

</html>