playground:tes

Halaman ini hanya bisa dibaca. Anda bisa melihat sumbernya, tetapi tidak diperkenankan untuk mengubah. Hubungi administrator jika menemukan kesalahan pada halaman ini.
<html>
<style>
        #containerBookingV1 {
  border-radius: 10px;
  margin: 0 auto;
  padding: 30px;
  border: 0.5px solid  #dddd;
  box-shadow: 0 2px 6px rgba(138, 139, 139, 0.5);
}

#containerMasukanKotaPenjemputanV1,
#containerMasukanDurasiV1,
#containerMasukanJumlahPesertaV1,
#containerPilihTanggalV1 {
  margin-bottom: 16px;
}
#containerMasukanJumlahPesertaV1{
  display: flex;
  flex-direction: column;
}
#judulBookingV1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

#TextjudulBookingV1 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

#taqJudulBookingV1 {
  margin-left: 16px;
  padding: 8px;
  background-color: #183153;
  color: #fff;
  border-radius: 8px;
}

#TexttaqBookingV1 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

#labelTextmasukanKotaPenjemputanBookingV1,
#labelPilihTanggalBookingV1,
#labelMasukanJumlahPeseraBookingV1,
#labelTextDurasiBookingV1 {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  padding-left: 17px;
}

#ValueKotaPenjemutanV1,
#ValueDurasiV1,
#ValueJumlahPesertaV1,
#ValueTanggalV1 {
  display: block;
  width: 100% ;
  padding: 15px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding-left: 25px;
  cursor: pointer;
}

.input-placeholder-text::placeholder {
  color: #000;
}

#ValueKotaPenjemutanV1:focus,
#ValueDurasiV1:focus,
#ValueJumlahPesertaV1:focus,
#ValueTanggalV1:focus {
border:2px solid #183153;
}

#pesanErrorKota,
#pesanErrorTanggal,
#pesanErrorDurasi,
#pesanErrorPeserta {
  background-color: #f44336;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(60, 40, 151, 0.2);
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #ffff;
  display: none;
  margin-left: 16px;
}

#tombolCtaWhatsapp {
  padding-left: 16px;
  margin-top: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#br1, #br2, #tombolCtaWhatsapp{
  padding-right: 16px;
}

#tombolSakti {
  width: 100%;
  padding: 16px 16px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background-color: #183153;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  background-image:none;
}

#tombolSakti:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(rgb(0,28,64), 0.5);
}

#tombolSakti:active {
  transform: scale(1.1);
}

#tombolSakti:focus {
  outline: none;
}

#bolongan {
  display: flex;
  align-items: center;
}

#anakbolongan {
  left: 0;
  transform: translate(22px, 0px);
  position: relative;
  padding-right: 3px;
  width: 13px;
}

@media only screen and (min-width: 600px) {
#conBr{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
}
#br2 {
  padding-right: 16px
}
}
    </style>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css"
        integrity="SHA384-sMDJ2c1bKwbTT9IO7v+8W10jcw90JF/tyBswETTvZbYwYm/jf6DvoaHnRyVJFpI/" crossorigin="anonymous">
    <section id="v1BookingOnline">
        <div id="containerBookingV1">
            <div id="judulBookingV1">
                <p id="TextjudulBookingV1">Request paket wisata</p>
                <div id="taqJudulBookingV1">
                    <p id="TexttaqBookingV1">DIENG</p>
                </div>
            </div>
            <div id="conBr">
                <div id="br1">
                    <div id="containerMasukanKotaPenjemputanV1">
                        <label id="labelTextmasukanKotaPenjemputanBookingV1" for="ValueKotaPenjemutanV1">Pilih kota
                            penjemputan</label>
                        <div id="bolongan">
                            <div id="anakbolongan"><i class="far fa-map-marked-alt"></i></div>
                            <select id="ValueKotaPenjemutanV1" name="KotaPenjemputanv1">
                                <option id="pilihPilihanKota" value="" disabled selected>Pilih meeting point
                                </option>
                                <option id="pilihanKota" value="Wonosobo">Wonosobo</option>
                                <option id="pilihanKota" value="Purwokerto">Purwokerto</option>
                                <option id="pilihanKota" value="Yogyakarta">Yogyakarta</option>
                                <option id="pilihanKota" value="Semarang">Semarang</option>
                                <option id="pilihanKota" value="Surakarta">Surakarta</option>
                                <option id="pilihanKota" value="Kota lain">Kota lain sekitar Jateng & DIY</option>
                            </select>
                        </div>
                        <div id="pesanErrorKota"></div>
                    </div>
                    <div id="containerMasukanJumlahPesertaV1">
                        <label id="labelMasukanJumlahPeseraBookingV1" for="ValueJumlahPesertaV1">Masukan jumlah
                            peserta</label>
                        <div id="bolongan">
                            <div id="anakbolongan"><i class="far fa-user"></i></div>
                            <input class="input-placeholder-text" type="number" id="ValueJumlahPesertaV1"
                                name="jumlahPeserta" min="1" max="200" placeholder="Jumlah peserta">
                        </div>
                        <div id="pesanErrorPeserta"></div>
                    </div>
                </div>
                <div id="br2">
                    <div id="containerMasukanDurasiV1">
                        <label id="labelTextDurasiBookingV1" for="ValueDurasiV1">Pilih durasi</label>
                        <div id="bolongan">
                            <div id="anakbolongan"><i class="fas fa-history"></i></div>
                            <select class="SltValueDurasiV1" id="ValueDurasiV1" name="DurasiBookingv1">
                                <option id="idPilihanDurasiV1" value="" disabled selected>Pilih durasi</option>
                                <option class="OptValueDurasiV1" id="idDurasiV1" value="1 Hari Tour">Paket Dieng 1 hari
                                </option>
                                <option class="OptValueDurasiV1" id="idDurasiV1" value="2 Hari 1 Malam">Paket Dieng 2
                                    hari 1 malam</option>
                                <option class="OptValueDurasiV1" id="idDurasiV1" value="3 Hari 2 Malam">Paket Dieng 3
                                    hari 2 malam</option>
                            </select>
                        </div>
                        <div id="pesanErrorDurasi"></div>
                    </div>
                    <div id="containerPilihTanggalV1">
                        <label id="labelPilihTanggalBookingV1" for="ValueTanggalV1" autofocus>Pilih tanggal</label>
                        <div id="bolongan">
                            <div id="anakbolongan"></div>
                            <input type="date" id="ValueTanggalV1" name="PilihTanggal">
                        </div>
                        <div id="pesanErrorTanggal">
                        </div>
                    </div>
                </div>
                <div id="tombolCtaWhatsapp">
                    <button id="tombolSakti" onclick="sendMessage()"><i class="fab fa-whatsapp"
                            style="padding-right:5px"></i>
                        Cek Harga</span>
                    </button>
                </div>
            </div>
        </div>
    </section>

</body>
<script>
    const pilihanKota = document.getElementById("ValueKotaPenjemutanV1");
    const durasiBooking = document.getElementById("ValueDurasiV1");
    const jumlahPeserta = document.getElementById("ValueJumlahPesertaV1");
    const pilihTanggal = document.getElementById("ValueTanggalV1");
    const pesanErrorKota = document.getElementById("pesanErrorKota");
    const pesanErrorDurasi = document.getElementById("pesanErrorDurasi");
    const pesanErrorPeserta = document.getElementById("pesanErrorPeserta");
    const pesanErrorTanggal = document.getElementById("pesanErrorTanggal");

    const today = new Date().toISOString().split('T')[0];
    pilihTanggal.setAttribute('min', today);

    document.getElementById("tombolSakti").addEventListener("click", function (event) {

        if (!pilihanKota.value) {
            pesanErrorKota.textContent = "Silakan pilih kota terlebih dahulu";
            pesanErrorKota.style.display = "block";
            setTimeout(function () {
                pesanErrorKota.style.display = "none";
            }, 2000);
            return;
        }
        pesanErrorKota.textContent = "";

        if (!jumlahPeserta.value) {
            pesanErrorPeserta.textContent = "Silakan masukan jumlah peserta terlebih dahulu";
            pesanErrorPeserta.style.display = "block";
            setTimeout(function () {
                pesanErrorPeserta.style.display = "none";
            }, 2000);
            return;
        }
        pesanErrorPeserta.textContent = "";

        if (!durasiBooking.value) {
            pesanErrorDurasi.textContent = "Silakan pilih durasi terlebih dahulu";
            pesanErrorDurasi.style.display = "block";
            setTimeout(function () {
                pesanErrorDurasi.style.display = "none";
            }, 2000);
            return;
        }
        pesanErrorDurasi.textContent = "";

        if (!pilihTanggal.value) {
            pesanErrorTanggal.textContent = "Silakan pilih tanggal terlebih dahulu";
            pesanErrorTanggal.style.display = "block";
            setTimeout(function () {
                pesanErrorTanggal.style.display = "none";
            }, 2000);
            return;
        }
        pesanErrorTanggal.textContent = "";

        const dateFormat = { year: 'numeric', month: 'long', day: 'numeric' };
        const kota = pilihanKota.options[pilihanKota.selectedIndex].text;
        const durasi = durasiBooking.options[durasiBooking.selectedIndex].text;
        const peserta = jumlahPeserta.value;
        const tanggal = new Date(pilihTanggal.value).toLocaleDateString('id-ID', dateFormat);

        const pesan = `Hallo PWDW, saya ingin mengetahui harga paket tour Dieng untuk,\nPenjemputan: *${kota}* \nDurasi: *${durasi}* \nPeserta: *${peserta}* \nTanggal: *${tanggal}* \nMohon informasinya, Terimakasih.`;
        const encodedPesan = encodeURIComponent(pesan);
        const url = `https://api.whatsapp.com/send?phone=6281392654441&text=${encodedPesan}`;
        window.open(url, '_blank');
    });

</script>
</html>