PWEB - Kuis PWEB 1
Putu Ravindra Wiguna
5025201237
Deskripsi Kuis:
Dengan menggunakan html, css, dan javascript buatlah front-end form pendaftaran di atas.
Berikut source codeya pada repository github: RavindraWiguna/kuispweb (github.com)
index.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 Pendaftaran Pekan Olahraga dan Seni Guru TKA/TPA 2020</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="kopformulir">
<div id="formtitle">Formulir Pendaftaran</div>
<div id="eventtitle">Pekan Olahrage dan Seni Guru TKA/TPA</div>
<div id="eventyear">Tahun 2020</div>
</div>
<div class="content">
<table align="center" cellpadding="10" border="1">
<tr>
<td>
NAMA PESERTA:
</td>
<td>
<input type="text" placeholder="Masukkan nama anda" id="data_nama">
</td>
</tr>
<tr>
<td>
TEMPAT LAHIR:
</td>
<td>
<input type="text" placeholder="Masukkan tempat lahir anda" id="data_tempat_lahir">
</td>
</tr>
<tr>
<td>
TANGGAL LAHIR:
</td>
<td>
<input type="date" placeholder="" id="data_tgl_lahir">
</td>
</tr>
<tr>
<td>
UTUSAN UNIT TKA/TPA:
</td>
<td>
<input type="text" placeholder="Masukkan unit" id="data_unit">
</td>
</tr>
<tr>
<td>
KELURAHAN/DESA:
</td>
<td>
<input type="text" placeholder="Masukkan nama desa/kelurahan" id="data_desa">
</td>
</tr>
<tr>
<td>
KECAMATAN:
</td>
<td>
<input type="text" placeholder="Masukkan nama kecamatan" id="data_kecamatan">
</td>
</tr>
<tr>
<td>
NOMOR TELEPON:
</td>
<td>
<input type="text" placeholder="Masukkan no telepon anda" id="data_telp">
</td>
</tr>
</table>
<div id="jenislombacontainer">
<div id="jenislombatext">
JENIS LOMBA:
</div>
<table id="jenislombatabel" align="center" cellpadding="2" cellspacing="2">
<tr>
<td>
<input type="radio" id="cat1" name="jlomba" value="1">
<label for="cat1">Tarik Tambang (4 Perempuan + 1 Laki = 5 orang)</label>
</td>
</tr>
<tr>
<td>
<input type="radio" id="cat2" name="jlomba" value="2">
<label for="cat2">Lari Estafet (4 Perempuan)</label>
</td>
</tr>
<tr>
<td>
<input type="radio" id="cat3" name="jlomba" value="3">
<label for="cat3">Gobak Sodor (4 Perempuan)</label>
</td>
</tr>
<tr>
<td>
<input type="radio" id="cat4" name="jlomba" value="4">
<label for="cat4">Tartil (1 orang perwakilan TKA/TPA)</label>
</td>
</tr>
<tr>
<td>
<input type="radio" id="cat5" name="jlomba" value="5">
<label for="cat5">Ceramah (1 orang perwakilan TKA/TPA)</label>
</td>
</tr>
</table>
</div>
<div id="tombolsumbit">
<input type="submit" value="Daftar" onclick="validate()">
</div>
</div>
<div class="tandatangan">
<div id="imagetandatangan">
<div id="kepalaunit">
<div id="namattdkepala">
Kepala Unit TKA/TPA
</div>
<div class="dotline">
____________
</div>
<!-- upload image -->
</div>
<div id="pesertalomba">
<div id="tanggalisi">
Surabaya,
</div>
<div id="namattdpeserta">
Peserta Lomba
</div>
<!-- upload image -->
<div class="dotline">
____________
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@300;400;500;600;700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
body, html{
height: 100%;
margin: 0;
padding: 0;
/* font-family: 'Ubuntu', arial; */
font-family: 'Kreon', arial;
text-align: center;
background-color: white;
}
.content{
display: flex;
justify-content: center;
flex-direction: column;
}
#tombolsumbit{
margin-bottom: 25px;
}
#tanggalisi{
/* float: right; */
width: 100%;
/* margin-bottom: 20px; */
/* text-align: right; */
/* padding-right: 50px; */
/* margin-right: 10px; */
/* padding-left: 245px; */
}
#imagetandatangan{
margin-top: 16px;
display: flex;
}
#kepalaunit{
margin-top: 20px;
width: 50%;
}
#pesertalomba{
width: 50%;
}
input[type=radio]{
float: left;
}
table#jenislombatabel label{
float: left;
}
.dotline{
margin-top: 100px;
}
script.js
function getAge(dateString)
{
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate()))
{
age--;
}
return age;
}
function checkradiobutton(){
var c1 = document.getElementById('cat1');
var c2 = document.getElementById('cat2');
var c3 = document.getElementById('cat3');
var c4 = document.getElementById('cat4');
var c5 = document.getElementById('cat5');
var checked = -1;
if(c1.checked){
checked = 1;
}
else if(c2.checked){
checked = 2;
}
else if(c3.checked){
checked = 3;
}
else if(c4.checked){
checked = 4;
}
else if(c5.checked){
checked = 5;
}
// alert(checked);
return checked;
}
function get_date(){
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
var databula = [
"Invalid"
,"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus"
,"September"
,"Oktober"
,"November",
"Desember"
]
today = dd + ' ' + databula[parseInt(mm)] + ' ' + yyyy;
return today;
}
function validate(){
var tanggalisi = document.getElementById("tanggalisi");
tanggalisi.innerHTML ="Surabaya, " + get_date();
// alert("clicked");
var nama = document.getElementById("data_nama").value;
var tempatLahir = document.getElementById("data_tempat_lahir").value;
// is astring
var tanggalLahir = document.getElementById('data_tgl_lahir').value;
var unit = document.getElementById("data_unit");
var desa = document.getElementById("data_desa");
var kecamatan = document.getElementById("data_kecamatan");
var telp = document.getElementById("data_telp");
var catlomba = checkradiobutton();
var letters = /^[A-Za-z]+$/
var numbers = /^[0-9]+$/
var alphanum = /^[0-9a-zA-Z]+$/
if(nama==''
|| tempatLahir == ''
|| tanggalLahir == ''
|| unit == ''
|| desa == ''
|| kecamatan == ''
||telp == ''
|| catlomba == -1){
alert("Isi seluruh form dengan benar terlebih dahulu");
}
else if(!letters.test(nama)){
alert("Nama hanya dapat diisi dengan huruf");
}
else if(! letters.test(tempatLahir)){
alert("Tempat lahir hanya dapat diisi dengan huruf");
}
else if(getAge(tanggalLahir) < 18){
alert("Harus berumur paling tidak 18 tahun");
}
else if(! alphanum.test(unit)){
alert("Unit hanya dapat diisi dengan alphanumerik");
}
else if(!letters.test(desa)){
alert("Desa hanya dapat diisi dengan huruf");
}
else if(! letters.test(kecamatan)){
alert("Kecamatan hanya dapat diisi dengan huruf");
}
else if(numbers.test(telp)){
alert("Nomor telepon hanya dapat diisi dengan angka");
}
else{
alert("Berhasil mendaftar");
}
// checkradiobutton();
// var cp = document.getElementById('p2').value;
// alert(tanggalLahir);
// console.log(tanggalLahir);
// alert(typeof(tanggalLahir));
}
var tanggalisi = document.getElementById("tanggalisi");
tanggalisi.innerHTML ="Surabaya, " + get_date();
Berikut link websitenya: Formulir Pendaftaran Pekan Olahraga dan Seni Guru TKA/TPA 2020 (ravindrawiguna.github.io)
Berikit screenshot hasil:
Komentar
Posting Komentar