Cara Menambahkan Galeri Foto dan Buku Tamu Online pada Web Undangan Pernikahan - Part 7

Part 7: Cara Menambahkan Galeri Foto dan Buku Tamu Online pada Web Undangan Pernikahan

Pada Part 6, kita sudah menambahkan musik latar dan countdown timer. Kini di Part 7, kita akan mempercantik undangan dengan menambahkan galeri foto pernikahan serta buku tamu online agar para tamu bisa meninggalkan ucapan langsung di website.

Langkah 1: Menambahkan Galeri Foto

Siapkan beberapa foto prewedding atau pernikahan dengan ukuran seragam (misalnya 300x200px). Tambahkan kode berikut di index.html sebelum bagian countdown:

<!-- Galeri Foto Pernikahan -->
<div class="galeri">
  <h2>Galeri Foto Kami</h2>
  <div class="foto-grid">
    <img src="foto1.jpg" alt="Foto 1">
    <img src="foto2.jpg" alt="Foto 2">
    <img src="foto3.jpg" alt="Foto 3">
    </div>
</div>

Tambahkan CSS untuk mengatur tampilan galeri:

/* Galeri Foto */
.galeri {
  margin-top: 40px;
  text-align: center;
}
.galeri h2 {
  color: #b56576;
  margin-bottom: 15px;
}
.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  max-width: 600px;
  margin: auto;
}
.foto-grid img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.3s;
  cursor: pointer;
}
.foto-grid img:hover {
  transform: scale(1.05);
}

Langkah 2: Membuat Buku Tamu Online

Tambahkan kode berikut di bawah galeri foto:

<!-- Buku Tamu Online -->
<div class="buku-tamu">
  <h2>Buku Tamu Online</h2>
  <form id="form-tamu">
    <input type="text" id="nama" placeholder="Nama Anda" required><br><br>
    <textarea id="pesan" placeholder="Tulis ucapan Anda..." required></textarea><br><br>
    <button type="submit">Kirim Ucapan</button>
  </form>
  <div id="daftar-ucapan"></div>
</div>

CSS untuk buku tamu:

/* Buku Tamu Online */
.buku-tamu {
  margin-top: 40px;
  background: #fdf2f8;
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.buku-tamu input, .buku-tamu textarea {
  width: 90%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.buku-tamu button {
  background-color: #b56576;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.buku-tamu button:hover {
  background-color: #8a3f52;
}
#daftar-ucapan {
  margin-top: 20px;
  text-align: left;
}
.ucapan {
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Langkah 3: Tambahkan JavaScript

Tambahkan script berikut sebelum tag </body>:

<script>
  const formTamu = document.getElementById("form-tamu");
  const daftarUcapan = document.getElementById("daftar-ucapan");

  formTamu.addEventListener("submit", function(event) {
    event.preventDefault();

    const nama = document.getElementById("nama").value;
    const pesan = document.getElementById("pesan").value;

    const ucapanBaru = document.createElement("div");
    ucapanBaru.classList.add("ucapan");
    ucapanBaru.innerHTML = "<strong>" + nama + ":</strong> <p>" + pesan + "</p>";

    daftarUcapan.prepend(ucapanBaru);
    formTamu.reset();
  });
</script>

Kesimpulan

Pada Part 7, kita sudah berhasil menambahkan galeri foto pernikahan dan buku tamu online. Fitur ini membuat undangan lebih interaktif dan personal. Di Part 8, kita akan menambahkan fitur dark mode agar undangan terlihat modern dan nyaman di mata.