Kuis 1 Pemrograman Web

Nama: Neisa Hibatillah Alif

NRP: 5025201170

Kelas: B

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</title>
    <link rel="stylesheet" href="style.css"/> 
    <script src="script.js"></script>
</head>
<body>
    <h1 align="center">Formulir Pendaftaran</h1>
    <h2 align="center">Pekan Olahraga dan Seni Guru TKA/TPA</h2>
    <h3 align="center">Tahun 2020</h3>
    
    <div id="container">
        <table cellspacing="2" align="center" cellpadding="B" border="0">
            <tr>
                <td>Nama Peserta</td>
                <td><input type="text" id="nama"></td>
            </tr>
            <tr>
                <td>Tempat Lahir</td>
                <td><input type="text" id="tempat"></td>
            </tr>
            <tr>
                <td>Tanggal Lahir</td>
                <td><input type="text" id="tanggal"></td>
            </tr>
            <tr>
                <td>Utusan Unit TKA/TPA</td>
                <td><input type="text" id="unit"></td>
            </tr>
            <tr>
                <td>Kelurahan/Desa</td>
                <td><input type="text" id="keldesa"></td>
            </tr>
            <tr>
                <td>Kecamatan</td>
                <td><input type="text" id="kecamatan"></td>
            </tr>
            <tr>
                <td>Nomor Telepon</td>
                <td><input type="number" id="nomor"></td>
            </tr>
            <tr>
                <td>Jenis Lomba</td>
                <td>
                    <select id="lomba" name="lomba">
                        <option value="1">Tarik Tambang</option>
                        <option value="2">Lari Estafet</option>
                        <option value="3">Gobak Sodor</option>
                        <option value="4">Tartil</option>
                        <option value="5">Ceramah</option>
                      </select>
                </td>
            </tr>
            <tr>
                <td>Tanda Tangan Kepala Unit TKA/TPA</td>
                <td>
                    <input type="file" id="file" name="filename" onclick="fileValidation()">
                </td>
            </tr>
            <tr>
                <td>Tanda Tangan Peserta Lomba</td>
                <td>
                    <input type="file" id="file" name="filename" onclick="fileValidation()">
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="Daftar" class="button" onclick="create_account()"></td>
            </tr>
        </table>
    </div>
    
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat');

*{    
    box-sizing: border-box;  
    font-family: 'Montserrat';  
    color: var black;  
} 

body{  
    background-color: #f2f2f2;
}

label{  
    display: block;  
} 

table{
    border-collapse: collapse;
}

td{
    padding-top: .3em;
    padding-bottom: .3em;
    padding-right: .3em;
}

#container{  
    margin: 30px 300px;  
    background-color: white;  
    padding: 50px;  
    border-radius: 1em;  
    box-shadow: 0px 15px 80px 20px #0000000d;
}  

.button{  
    padding: 8px 15px;  
    background-color: #B2BEB5; 
    border-radius: 8px;  
    border-style: none;  
    transition: 0.15s; 
    position:absolute;
    top: 550px;
    right: 350px;
}  

.button:hover{  
    background-color: #818589;  
    color: white;  
    cursor: pointer;  
}

script.js

function create_account(){
    var nama = document.getElementById("nama").value;
    var tempat = document.getElementById("tempat").value;
    var tanggal = document.getElementById("tanggal").value;
    var unit = document.getElementById("unit").value;
    var keldesa = document.getElementById("keldesa").value;
    var kecamatan = document.getElementById("kecamatan").value;
    var nomor = document.getElementById("nomor").value;
    var lomba = document.getElementById("lomba").value;

    var letters = /^[A-Za-z]+$/;
    var numb = /^[0-9]+$/;
    var date = /^(0[1-9]|1\d|2\d|3[01])\-(0[1-9]|1[0-2])\-(19|20)\d{2}$/;

    if(nama=='' || tempat=='' || tanggal=='' || unit=='' || keldesa=='' || kecamatan=='' || nomor=='' || lomba==''){
        alert("Anda harus mengisi data dengan lengkap");
    } else if(!letters.test(nama)){
        alert("Nama hanya dapat berupa huruf");
    } else if(!letters.test(tempat)){
        alert("Tempat lahir hanya dapat berupa huruf");
    } else if(!date.test(tanggal)){
        alert("Format tanggal lahir: dd-mm-yyyy");
    } else if(!numb.test(unit)){
        alert("Unit hanya dapat berupa angka");
    } else if(!letters.test(keldesa)){
        alert("Kelurahan/Desa hanya dapat berupa huruf");
    } else if(!letters.test(kecamatan)){
        alert("Kecamatan hanya dapat berupa huruf");
    } else if(!numb.test(nomor)){
        alert("Nomor telepon hanya dapat berupa angka");
    } else if(document.getElementById("nomor").value.length > 15){
        alert("Panjang maksimum nomor telepon adalah 14");
    } 
    else{
        alert("Anda telah berhasil mendaftar");
    }
}

function fileValidation() {
    var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
 
    // Allowing file type
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
     
    if (!allowedExtensions.exec(filePath)) {
        alert('Invalid file type');
        fileInput.value = '';
        return false;
    } else{
        // Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '<img src="' + e.target.result+ '"/>';
            };
             
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}