PWEB A - Quiz 1 - HTML, CSS, dan Javascript

pada tanggal

Quiz 1 - Membuat Website Pencarian Kode Pos Indonesia

27 September 2022

Pada quiz 1 ini kita dimina membuat form pendaftaran dengan menggunakan html sebagai kerangka website, css untuk memperindah tampilan halam website, dan javascript agar bisa menampilkan halaman website yang kita punya dengan dinamis. 

Fitur Javascript:
  • Drop down dinamis untuk daftar provinsi
  • Form Validation untuk mendeteksi form belum terisi
    • Mendeteksi format untuk nama, kota, sponsor, nama perusahaan, dan nama kontak personal tidak boleh ada angka
    • Mendeteksi format untuk email dan email perusahaan
    • Mendeteksi form belum terisi
  • Menampilkan situs registrasi berhasil

Screenshoot

  • Tampilan Situs

  • Tampilan Drop Down nama provinsi
  • Tampilan alert untuk form validation

  • Tampilan setelah berhasil daftar


Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<title>Form Pendaftaran</title>
</head>
<body>
<main>
<h1>FORMULIR REGISTRASI</h1>
<h2>PESERTA</h2>
<form action="">
<label for="nama">Nama Lengkap & Gelar</label>
<input type="text" name="nama" id="nama" autofocus />
<label for="kota">Asal Instansi/Kota</label>
<input type="text" name="nama" id="kota" />
<label for="alamat">Alamat</label>
<input type="text" name="alamat" id="alamat" />
<label for="kode-pos">Kode Pos</label>
<input type="number" name="kode-pos" id="kode-pos" />
<label for="provinsi">Provinsi</label>
<select name="provinsi" id="provinsi"></select>
<label for="telepon">Telepon/Handphone</label>
<input type="number" name="telepon" id="telepon" />
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<label for="sponsor">Sponsor</label>
<input type="text" name="sponsor" id="sponsor" />
<label for="nama-perusahaan">- Nama Perusahaan</label>
<input type="text" name="nama-perusahaan" id="nama-perusahaan" />
<label for="alamat-perusahaan">- Alamat Perusahaan</label>
<input type="text" name="alamat-perusahaan" id="alamat-perusahaan" />
<label for="nama-kontak-personal">- Nama Kontak Personal</label>
<input type="text" name="nama-kontak-personal" id="nama-kontak-personal" />
<label for="telp-personal">- Telp. Personal</label>
<input type="number" name="telp-personal" id="telp-personal" />
<label for="email-perusahaan">- Email Perusahaan</label>
<input type="email" name="email-perusahaan" id="email-perusahaan" />
<button id="submit" onclick="validate()">Registrasi</button>
</form>
<p>Kontribusi peserta Rp2.500.000,- (Dua Juta Lima Ratus Ribu Rupiah) belum termasuk penginapan dan akomodasi.</p>
<p>Konfirmasi Kepesertaan :</p>
<ul>
<li>Sebelum 15 Januari 2012 : Rp2.500.000,-</li>
<li>Sesudah 15 Januari 2012 : Rp2.750.000,-</li>
<li>On site : Rp3.000.000,-</li>
</ul>
<p>Pembatalan Pendaftaran :</p>
<ul>
<li>sebelum H-5 uang dikembalikan 50%</li>
<li>sesudah H-5 uang tidak dapat dikembalikan</li>
</ul>
<p>Akomodasi penginapan peserta, harga kamar kelas standar berkisar antara Rp250.000,- sampai Rp300.000,-</p>
<p>
<span>Pendaftaran via transfer Bank ke : <br />Nama Bank : Bank BCA KCU Cirebon <br />No. Rekening : 1341015478 <br />Atas Nama : Junaedi, S.Kep</span>
</p>
<section class="card">
<p>
Bukti transfer mohon dikirim ke alamat Sekretariat Panitia UPTD Puskesmas Sitopeng. <br />Jl. Sekarsari No. 1 Argasunya Hajarmukti Kota Cirebon atau kirim ke email : enterprenurse41@gmail.com <br />Konfirmasi setelah transfer ke
0818232869
</p>
</section>
</main>
<!-- Javascript -->
<script src="main.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
const provinsi = document.getElementById("provinsi");
const getProvinsi = async () => {
const response = await fetch("https://ibnux.github.io/data-indonesia/provinsi.json");
const data = await response.json();
return data;
};
const showProvinsi = async () => {
const options = await getProvinsi();
provinsi.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
provinsi.appendChild(newOption);
});
};
showProvinsi();
function validate() {
const nama = document.getElementById("nama").value;
const kota = document.getElementById("kota").value;
const alamat = document.getElementById("alamat").value;
const kodePos = document.getElementById("kode-pos").value;
const telepon = document.getElementById("telepon").value;
const email = document.getElementById("email").value;
const sponsor = document.getElementById("sponsor").value;
const namaPerusahaan = document.getElementById("nama-perusahaan").value;
const alamatPerusahaan = document.getElementById("alamat-perusahaan").value;
const namaKontakPersonal = document.getElementById("nama-kontak-personal").value;
const telpPersonal = document.getElementById("telp-personal").value;
const emailPerusahaan = document.getElementById("email-perusahaan").value;
var letterTest = /\d/;
var emailTest = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
if (letterTest.test(nama)) {
alert("Nama tidak boleh berupa angka");
} else if (letterTest.test(kota)) {
alert("Kota tidak boleh berupa angka");
} else if (letterTest.test(sponsor)) {
alert("Sponsor tidak boleh berupa angka");
} else if (letterTest.test(namaPerusahaan)) {
alert("Nama Perusahaan tidak boleh berupa angka");
} else if (letterTest.test(namaKontakPersonal)) {
alert("Nama Kontak Personal tidak boleh berupa angka");
} else if (!emailTest.test(email)) {
alert("Isikan format email dengan tepat");
} else if (!emailTest.test(emailPerusahaan)) {
alert("Isikan format email perusahaan dengan tepat");
} else if (
nama == "" ||
kota == "" ||
alamat == "" ||
kodePos == "" ||
telepon == "" ||
email == "" ||
sponsor == "" ||
namaPerusahaan == "" ||
alamatPerusahaan == "" ||
namaKontakPersonal == "" ||
telpPersonal == "" ||
emailPerusahaan == ""
) {
alert("Masih ada kolom yang kosong, isi terlebih dahulu");
} else {
alert("Selamat anda berhasil registrasi");
window.location = "/succed.html";
}
}
view raw main.js hosted with ❤ by GitHub
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
font-family: "Inter", sans-serif;
background-color: rgb(177, 232, 255);
background-color: linear-gradient(0deg, rgba(177, 232, 255, 1) 0%, rgba(0, 181, 255, 1) 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 40px 0;
}
h1,
h2,
h3 {
font-weight: 700;
}
h1 {
display: block;
background-color: orange;
width: fit-content;
font-size: 24px;
padding: 10px;
border-radius: 10%;
position: absolute;
top: -25px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
h2 {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
p {
margin: 15px 0;
}
ul {
margin-left: 18px;
margin-bottom: 15px 0;
}
main {
width: 70%;
background-color: white;
border-style: ridge;
border-width: 6px;
border-radius: 24px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
padding: 24px;
position: relative;
}
label {
display: inline-block;
width: 30%;
vertical-align: middle;
}
input {
display: inline-block;
width: 65%;
height: 28px;
padding: 12px 6px;
font-size: 16px;
margin-bottom: 10px;
}
select {
display: inline-block;
width: 65%;
height: 28px;
font-size: 16px;
margin-bottom: 10px;
}
button {
padding: 10px 40px;
margin: 10px 0;
font-size: 16px;
background-color: lightgreen;
border: none;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
transition: 0.5s;
}
button:hover {
background-color: rgb(209, 255, 209);
cursor: pointer;
transition: 0.5s;
}
span {
font-weight: 700;
}
.card {
width: 50%;
border-style: double;
padding: 10px;
}
@media screen and (max-width: 800px) {
label {
width: 50%;
}
input {
width: 45%;
}
select {
width: 45%;
}
}
@media screen and (max-width: 590px) {
main {
width: 90%;
}
label {
width: 100%;
}
input {
width: 100%;
}
select {
width: 100%;
}
.card {
width: 100%;
}
}
@media screen and (max-width: 470px) {
h1 {
font-size: 18px;
}
}
view raw style.css hosted with ❤ by GitHub 

Nama : Arief Badrus Sholeh
NRP : 5025201228
Kelas : Pemrograman Web A
Tahun : 2022/2023

Komentar

Posting Komentar