Pemrograman A - Kuis 1
Nama: Pierra Muhammad Shobr
NRP: 5025201062
HTML:
<!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">
<title>Formulir Registrasi</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="judul">
<h1>Formulir Registrasi</h1>
</div>
<h2>PESERTA</h2>
<div class="container">
<form id="form-regis">
<div class="input">
<p>Nama Lengkap & Gelar:</p>
<input type="text" placeholder="Nama Lengkap" id="name">
</div>
<div class="input">
<p>Asal Instansi / Kota:</p>
<input type="text" placeholder="Asal Instansi / kota" id="kota">
</div>
<div class="input">
<p>Alamat:</p>
<input type="text" placeholder="Alamat" id="alamat">
</div>
<div class="input">
<p>Kode Pos:</p>
<input type="text" placeholder="Kode pos" id="kode-pos">
</div>
<div class="input">
<p>Provinsi:</p>
<input type="text" placeholder="Provinsi" id="provinsi">
</div>
<div class="input">
<p>Telpon / Handphone:</p>
<input type="text" placeholder="Telpon/Handphone" id="nomor-telp">
</div>
<div class="input">
<p>Email:</p>
<input type="text" placeholder="Email" id="email">
</div>
<div class="input">
<p>Sponsor:</p>
<ul>
<li>
<p>Nama Perusahaan:</p>
<input type="text" placeholder="Nama Perusahaan" id="nama-company">
</li>
<li>
<p>Alamat Perusahaan:</p>
<input type="text" placeholder="Alamat Perusahaan" id="alamat-company">
</li>
<li>
<p>Nama Kontak Personal:</p>
<input type="text" placeholder="Nama Kontak Personal" id="nama-cp">
</li>
<li>
<p>Telpon Personal:</p>
<input type="text" placeholder="Telp.Personal" id="nomor-cp">
</li>
<li>
<p>Email Perusahaan:</p>
<input type="text" placeholder="Email Perusahaan" id="email-company">
</li>
</ul>
</div>
<div class="input">
<p>Upload bukti bayar:</p>
<div class="upload-file">
<input type="file" id="img" name="img" accept="image/*">
</div>
</div>
<br>
<div>
<p>Kontribusi Peserta Rp2.500.000,00- (Dua Juta Lima Ratus Ribu Rupiah) belum termasuk penginapan
dan akomodasi
</p>
<p>Konfirmasi Kepesertaan:</p>
<ul>
<li>
Sebelum 15 Januari 2012 <span class="jeda-1">: Rp2.500.000,00-</span>
</li>
<li>
Sesudah 15 Januari 2012 <span class="jeda-2">: Rp2.750.000,00-</span>
</li>
<li>
On site <span class="jeda-3">: Rp3.000.000,00-</span>
</li>
</ul>
<p>Akoodasi penginapan peserta, harga kamar kelas standar
berkisar antara Rp250.000,00- - Rp300.000,00-*)
</p>
<b>
<p>Pendaftaran via transfer bank ke</p>
<table>
<tr>
<td>Nama Bank</td>
<td>:Bank BCA KCU Cirebon</td>
</tr>
<tr>
<td>No. Rekening</td>
<td>:1341015478</td>
</tr>
<tr>
<td>Atas Nama</td>
<td>:Junaedi, S.Kep</td>
</tr>
</table>
</b>
</div>
<button class="btn">Daftar</button>
</form>
</div>
<script href="./script.js"></script>
</body>
</html>
CSS:
body{
margin: 0;
background-color: #898AA6;
padding-bottom: 50px;
}
p{
margin: 0;
margin-bottom: 12px;
font-family: arial;
}
input{
height: 25px;
margin-bottom: 12px;
margin-left: 50px;
width: 440px;
border-radius: 12px;
border-style: none;
padding-left: 12px;
}
.container{
margin-left: 330px;
margin-right: 330px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 20px;
padding-right: 20px;
background-color: #C9BBCF;
border-radius: 12px;
}
.input{
display: flex;
text-align: center;
vertical-align: middle;
}
h2{
text-align: center;
font-family: Arial;
}
#name{
margin-left: 150px;
cursor: pointer;
}
#kota{
margin-left: 180px;
cursor: pointer;
}
#alamat{
margin-left: 267px;
cursor: pointer;
}
#kode-pos{
margin-left: 248px;
cursor: pointer;
}
#provinsi{
margin-left: 260px;
cursor: pointer;
}
#nomor-telp{
margin-left: 173px;
cursor: pointer;
}
#email{
margin-left: 277px;
cursor: pointer;
}
#nama-company{
margin-left: 80px;
cursor: pointer;
}
#alamat-company{
margin-left: 73px;
cursor: pointer;
}
#nama-cp{
margin-left: 49px;
cursor: pointer;
}
#nomor-cp{
margin-left: 99px;
cursor: pointer;
}
#email-company{
margin-left: 82px;
cursor: pointer;
}
.judul{
background-color: #C9BBCF;
}
h1{
margin: 0;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
font-family: Arial;
font-size: 24px;
}
li{
display: flex;
}
.btn{
margin-top: 12px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 380px;
padding-right: 380px;
border-radius: 25px;
border-style: none;
font-weight: 700;
font-size: 16px;
background-color: #D6EFED;
}
.jeda-1{
margin-left: 25px;
}
.jeda-2{
margin-left: 27px;
}
.jeda-3{
margin-left: 140px;
}
.upload-file{
background-color: white;
padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px;
margin-left: 12px;
border-radius: 12px;
}
JS:
var form = document.getElementById('form-regis');
form.addEventListener("submit", function(e){
e.preventDefault()
var nama = document.getElementById('name').value;
var asal = document.getElementById('kota').value;
var alamat = document.getElementById('alamat').value;
var kode_pos = document.getElementById('kode-pos').value;
var provinsi = document.getElementById('provinsi').value;
var telp = document.getElementById('nomor-telp').value;
var email = document.getElementById('email').value;
var nama_company = document.getElementById('nama-company').value;
var alamat_company = document.getElementById('alamat-company').value;
var nama_cp = document.getElementById('nama-cp').value;
var nomor_cp = document.getElementById('nomor-cp').value;
var email_company = document.getElementById('email-company').value;
var file_verif = document.getElementById('img').value;
if(nama == ''){
alert("Tolong isi nama anda");
}
else if(asal == ''){
alert("Tolong isi asal anda");
}
else if(alamat == ''){
alert('Tolong isi alamat anda');
}
else if(kode_pos == ''){
alert('Tolong isi kode pos anda');
}
else if(provinsi == ''){
alert('Tolong isi provinsi anda');
}
else if(telp == ''){
alert('Tolong isi nomor telpon anda');
}
else if(email == ''){
alert('Tolong isi email anda');
}
else if(nama_company == ''){
alert('Tolong isi nama perusahaan anda');
}
else if(nama_cp == ''){
alert('Tolong isi nama kontak personal anda');
}
else if(nomor_cp == ''){
alert('Tolong isi nomor kontak personal anda');
}
else if(email_company == ''){
alert('Tolong isi email perusahaan anda');
}
else if(alamat_company == ''){
alert('Tolong isi alamat perusahaan anda');
}
})
Hasil:
Website: link
Komentar
Posting Komentar