PWEB : Kuis Pemrograman Web 1

pada tanggal

Kuis Pemrograman Web 1

Membuat Form Registrasi

Nama    : Azzura Ferliani Ramadhani

NRP         : 5025201190

Kelas      : Pemrograman Web - A

Tahun    : 2022/2023

Link website : website

Link Repository : repository


<!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">
<link rel="stylesheet" href="style.css">
<title>Formulir Registrasi</title>
</head>
<body id="body">
<div class="titled">
<h1>FORMULIR REGISTRASI</h1>
</div>
<div class="main-content">
<form class="form-basic" id="form" onsubmit="onSubmit()">
<section>
<h2 style="margin-top: 130px;">PESERTA</h2>
<div class="form-row">
<label>
<span>NAMA LENGKAP & GELAR</span>
<input type="text" name="name" id="nama" required>
</label>
</div>
<div class="form-row">
<label>
<span>ASAL INSTANSI</span>
<input type="text" name="asal-instansi" id="asal-instansi" required>
</label>
</div>
<div class="form-row">
<label>
<span>ALAMAT</span>
<input type="text" name="alamat" id="alamat" required>
</label>
</div>
<div class="form-row">
<label>
<span>KODE POS</span>
<input type="text" name="kode-pos" id="result" required>
</label>
</div>
<div class="form-row">
<label>
<span for="provinsi">PROVINSI</span>
<select type="text"
name="provinsi"
id="provinsi"
onchange="displayKabupaten()"
required>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>KOTA</span>
<select type="text"
name="kabupaten"
id="kabupaten"
onchange="displayKecamatan()"
required>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>NOMOR TELEPON</span>
<input
type="tel"
name="telp"
id="telp"
placeholder="08xxxxxxxxxx"
maxlength="12"
required>
</label>
</div>
<div class="form-row">
<label>
<span>EMAIL</span>
<input
type="email"
name="email"
id="email"
required>
</label>
</div>
<section>
<h2>SPONSOR</h2>
<div class="form-row">
<label>
<span>NAMA PERUSAHAAN</span>
<input type="text" name="nama-perusahaan" id="nama-perusahaan" required>
</label>
</div>
<div class="form-row">
<label>
<span>ALAMAT PERUSAHAAN</span>
<input type="text" name="alamat-perusahaan" id="alamat-perusahaan" required>
</label>
</div>
<div class="form-row">
<label>
<span>NAMA KONTAK PERSONAL</span>
<input type="text" name="nama-pers" id="nama-pers" required>
</label>
</div>
<div class="form-row">
<label>
<span>TELP. PERSONAL</span>
<input
type="tel"
name="telp-pers"
id="telp-pers"
placeholder="08xxxxxxxxxx"
maxlength="12"
required>
</label>
</div>
<div class="form-row">
<label>
<span>EMAIL PERUSAHAAN</span>
<input
type="email"
name="email-perusahaan"
id="email-perusahaan"
required>
</label>
</div>
</section>
<h2>SYARAT DAN KETENTUAN</h2>
<section style="margin-left: 12px;">
<p>Kontribusi peserta Rp. 2.500.000,- (Dua Juta Lima Ratus Ribu Rupiah) belum termasuk penginapan dan akomodasi</p><br/>
<b>Konfirmasi kepesertaan:</b>
<ul>
<li>Sebelum 15 Januari 2012 &nbsp; : Rp. 2.500.000,-</li>
<li>Sesudah 15 Januari 2012 &nbsp; : Rp. 2.500.000,-</li>
<li>On site &nbsp; : Rp. 2.500.000,-</li>
</ul>
<b>Pembatalan Pendaftaran:</b>
<ul>
<li>Sebelum H-5 uang dikembalikan 50%</li>
<li>Sesudah H-5 uang tidak dapat dikembalikan</li>
</ul><br/>
<p>Akomodasi penginapan peserta, harga kamar kelas standar berkisar antara Rp. 250.000,- sampai Rp. 350.000,- *)</p><br/>
<b>Pendaftaran via transfer bank ke:</b><br/>
<b>Nama Bank&nbsp;: Bank BCA KCU Cirebon</b><br/>
<b>No. Rekening&nbsp;: 1341015478</b><br/>
<b>Atas Nama&nbsp;: Junaedi, S.Kep</b><br/><br/>
</section>
<section>
<div class="rectangle">
<p>Bukti transfer mohon dikirim ke alamat Sekretariat Panitia UPTD Puskesmas Sitopeng</p>
<p>Jl. Sekarsari No. 1 Argasunya Harjamukti Kota Cirebon</p>
<p>atau kirim ke email: enterpreneurse41@gmail.com</p>
<p>konfirmasi setelah transfer ke 0818232609</p>
</div>
</section>
<div class="form-row">
<button type="submit" id="submit">Daftar</button>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
view raw index.html hosted with ❤ by GitHub
html{
background-color: #c0f8eb83;
}
.titled {
height: 80px;
width: 400px;
background-color: #4a876b;
text-align: center;
padding: 20px 0px;
color: #FFF;
border-radius: 20px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin-top: 20px;
margin-left: 500px;
position: absolute;
}
.row {
display: flex;
}
.column {
flex: 50%;
}
.form-basic{
max-width: 800px;
margin: 0 auto;
padding: 55px;
box-sizing: border-box;
border-radius: 25px;
position: static;
margin-top: 30px;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
font: bold 14px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.form-basic .form-row{
text-align: center;
margin-bottom: 20px;
}
.form-basic .form-title-row{
text-align: center;
}
/* The form title */
.form-basic h1{
display: inline-block;
box-sizing: border-box;
color: black;
font-size: 30px;
padding: 0 10px 15px;
margin: 0;
}
.form-basic h2{
color: black;
font-size: 20px;
padding: 0 10px 15px;
margin: 30px 0px;
text-align: start;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.form-basic .form-row > label span{
display: inline-block;
box-sizing: border-box;
color: black;
width: 250px;
text-align: left;
vertical-align: top;
padding: 12px 25px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.form-basic input{
color: black;
box-sizing: border-box;
width: 360px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 12px;
border: 1px solid #dbdbdb;
}
.form-basic input[type=radio],
.form-basic input[type=checkbox]{
box-shadow: none;
width: auto;
}
.form-basic input[type=checkbox]{
margin-top: 13px;
}
.form-basic select{
background-color: #ffffff;
color: black;
box-sizing: border-box;
width: 360px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 12px 8px;
border: 1px solid #dbdbdb;
}
.form-basic textarea{
color: black;
box-sizing: border-box;
width: 240px;
height: 80px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
font: normal 13px sans-serif;
padding: 12px;
border: 1px solid #dbdbdb;
resize: vertical;
}
.form-basic .form-radio-buttons{
display: inline-block;
vertical-align: top;
}
.form-basic .form-radio-buttons > div{
margin-top: 10px;
}
.form-basic .form-radio-buttons label span{
margin-left: 8px;
color: black;
font-weight: normal;
}
.form-basic .form-radio-buttons input{
width: auto;
}
.form-basic button{
width: 100%;
display: block;
border-radius: 2px;
background-color: #4a876b;
color: #ffffff;
font-weight: bold;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 14px 22px;
border: 0;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 20px;
}
.bar{
text-align: center;
text-decoration: none;
font-size: 20px;
display: inline-block;
margin-left: 250px;
}
li{
list-style:none;
margin-left:15px;
margin-bottom: 10px;
}
a{
color: #FFF;
text-decoration: none;
}
.logo{
float: left;
display: inline-block;
color:#FFF;
}
#search{
position: absolute;
top: 2.2em;
right: 50px;
}
.nav{
background-color: #494a54;
height: 70px;
}
footer {
text-align: center;
}
/* Making the form responsive. Remove this media query
if you don't need the form to work on mobile devices. */
@media (max-width: 600px) {
.form-basic{
padding: 30px;
max-width: 480px;
}
.form-basic .form-row{
max-width: 300px;
margin: 25px auto;
text-align: left;
}
.form-basic .form-title-row{
margin-bottom: 50px;
}
.form-basic .form-row > label span{
display: block;
text-align: left;
padding: 0 0 15px;
}
.form-basic select{
width: 240px;
}
.form-basic input[type=checkbox]{
margin-top:0;
}
.form-basic .form-radio-buttons > div{
margin: 0 0 10px;
}
.form-basic button{
margin: 0;
}
}
p {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
text-align: justify;
}
b {
margin-bottom: 10px;
}
.rectangle {
width:500px;
height:175px;
padding: 10px;
border:3px solid #000;
margin-left: 13px;
text-align: center;
}
view raw style.css hosted with ❤ by GitHub
const name = document.getElementById('nama');
const alamat = document.getElementById('alamat');
const provinsi = document.getElementById('provinsi');
const kabupaten = document.getElementById('kabupaten');
const kecamatan = document.getElementById('kecamatan');
const kelurahan = document.getElementById('kelurahan');
const telp = document.getElementById('telp');
const kode_pos = document.getElementById('kode-pos');
const getProvinsi = async () => {
const response = await fetch(
"https://ibnux.github.io/data-indonesia/provinsi.json"
);
const data = await response.json();
return data;
};
const getKabupaten = async (id) => {
const response = await fetch(
`https://ibnux.github.io/data-indonesia/kabupaten/${id}.json`
);
const data = await response.json();
return data;
};
const getKecamatan = async (id) => {
const response = await fetch(
`https://ibnux.github.io/data-indonesia/kecamatan/${id}.json`
);
const data = await response.json();
return data;
};
const getKelurahan = async (id) => {
const response = await fetch(
`https://ibnux.github.io/data-indonesia/kelurahan/${id}.json`
);
const data = await response.json();
return data;
};
const getResult = async (key) => {
const response = await fetch(`https://kodepos.vercel.app/search?q=${key}`);
const data = await response.json();
return data;
};
const removeData = (e) => {
while (e.hasChildNodes()) {
e.removeChild(e.firstChild);
}
};
const displayProvinsi = 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);
});
displayKabupaten();
};
const displayKabupaten = async () => {
removeData(kabupaten);
const options = await getKabupaten(provinsi.value);
kabupaten.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
kabupaten.appendChild(newOption);
});
displayKecamatan();
};
const displayKecamatan = async () => {
removeData(kecamatan);
const options = await getKecamatan(kabupaten.value);
kecamatan.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
kecamatan.appendChild(newOption);
});
displayKelurahan();
};
const displayKelurahan = async () => {
removeData(kelurahan);
const options = await getKelurahan(kecamatan.value);
kelurahan.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
kelurahan.appendChild(newOption);
});
displayResult();
};
const displayResult = async () => {
resultElement.innerHTML = "memuat...";
const results = await getResult(
kelurahan.options[kelurahan.selectedIndex].text
);
if (results.data.length <= 0) {
resultElement.innerHTML = "tidak ditemukan data";
} else {
resultElement.innerHTML = results.data[0].postalcode;
}
};
displayProvinsi();
function letters (name) {
return /^[a-zA-Z ]+$/.test(name);
}
function numbers (telp) {
return /^[0-9+]+$/.test(telp);
}
name.addEventListener ('blur', function (e) {
let name_value = name.value ;
if (!letters(name_value) && name_value.length > 0) {
alert( 'Please enter your name in letters' );
event.target.style.background = 'pink';
} else {
event.target.style.background = '';
}
});
telp.addEventListener ('blur', function (e) {
let telp_value = telp.value ;
if (!numbers(telp_value) && telp_value.length > 0) {
alert( 'Please enter your phone number in numbers' );
event.target.style.background = 'pink';
} else {
event.target.style.background = '';
}
});
document.getElementById("form").addEventListener("submit", function (event) {
event.preventDefault();
});
function onSubmit() {
alert("Pendaftaran Berhasil");
document.getElementById("form").reset();
}
view raw script.js hosted with ❤ by GitHub

Komentar

Posting Komentar