すみだ社中交歓　〜🌟 HTMLとJavaScriptでイベント表示アプリを作ろう 🎉〜

2024年11月20日

読了時間：2分

墨田区三田会の皆さんこんにちは！

Web担当の小林です。いつもお騒がせしております!🎺

実は当会のサイトを秘密裏にコツコツ作り込んでるのですが、お気づきでしょうか？

今回はトップページに新たに作りました「今後のイベントまで後何日かかるのか?」というイベント予告ミニアプリを作りましたので、その簡単な作り方をご紹介します!

よかったら、真似して遊んでみてください。🧸

では、さっそく今回は初心者の方でも楽しく学べるように、

HTMLとJavaScriptを使った簡単なアプリを一緒に作ってみましょう！

📅 アプリの内容

→ 未来のイベントをリストアップし、残りの日数も表示するアプリです！実際のコードを見ながら、ポイントを解説していきます💡

🛠 コード解説

1️⃣ HTMLの基本構造

以下がアプリのHTML部分です👇

<h1 class="title">イベント予告</h1>
<p class="subtitle">📅近くのイベントは以下の通りです🔍</p>
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>日付</th>
        <th>イベント</th>
        <th>残り日数</th>
      </tr>
    </thead>
    <tbody id="upcoming-events"></tbody>
  </table>
</div>

🧐 ポイント解説

<h1>や<p>タグでタイトルや説明文を記述！
<table>を使って、イベントをリスト表示。分かりやすくするため、ヘッダー行を定義しています。
id="upcoming-events"の部分はJavaScriptでデータを挿入する場所です✨

2️⃣ JavaScriptでデータ操作

次に、JavaScriptでイベント情報を動的に挿入する方法を見ていきます👇

const events = [
  { date: "2024-12-13", content: "とんかつディナー 🍴" },
  { date: "2025-01-09", content: "新年会 🎍" },
];

const upcomingEvents = document.getElementById("upcoming-events");
const today = new Date();

events.forEach((event) => {
  const eventDate = new Date(event.date);
  const daysUntil = Math.floor((eventDate - today) / (1000 * 60 * 60 * 24));

  if (daysUntil >= 0) {
    upcomingEvents.innerHTML += `
      <tr>
        <td>${event.date}</td>
        <td>${event.content}</td>
        <td>残り ${daysUntil} 日</td>
      </tr>
    `;
  }
});