トーストメッセージを表示する

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 11/27。

チャレンジ

簡単

送信時に成功メッセージを表示するフォームを作成します。送信が成功したことを伝えるトーストメッセージが表示され、3秒後に消えるようにしてください。

JavaScriptで完了させる手順：

イベントリスナーを追加する：
- form要素を取得し、変数に格納します
- toast要素を取得し、変数に格納します
- フォームに "submit" イベントリスナーを追加します
イベントリスナーの内部処理：
- event.preventDefault() を使用して、ページのリフレッシュを停止します
- "show" クラスを追加してトーストを表示します
- トーストから "hidden" クラスを削除します

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Form with Toast</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <button type="submit">Submit</button>
    </form>
  </div>

  <!-- トースト -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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