Quiz 1
Link repository:github
link web : quiz 1
source code :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="/assets/style.css"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <section> | |
| <form id ="form"> | |
| <div class="title"> | |
| <h2>Formulir pendaftaran</h2> | |
| <p>Pekan Olahraga dan seni Guru TKA/TPA</p> | |
| <p>Tahun 2020</p> | |
| </div> | |
| <div class="input-container"> | |
| <div class="input-wrapper"> | |
| <label for="name">Nama Peserta</label> | |
| <input id="name" type="text" required> | |
| </div> | |
| <div class="input-wrapper"> | |
| <label for="ttl">Tempat Tanggal Lahir</label> | |
| <input id="ttl" type="text" required> | |
| </div> | |
| <div class="input-wrapper"> | |
| <label for="utusan">Utusan Unit TKA/TPA</label> | |
| <input id="utusan" type="text" required> | |
| </div> | |
| <div class="input-wrapper"> | |
| <label for="kelurahan">Kelurahan/Desa</label> | |
| <input id="kelurahan" type="text" required> | |
| </div> | |
| <div class="input-wrapper"> | |
| <label for="kecamatan">Kecamatan</label> | |
| <input id="kecamatan" type="text" required> | |
| </div> | |
| <div class="input-wrapper"> | |
| <label for="telepon">Nomor Telepon</label> | |
| <input id="telepon" type="number" required> | |
| </div> | |
| </div> | |
| <div class="list"> | |
| <div class="left"> | |
| <p>Jenis Lomba :</p> | |
| </div> | |
| <div class="right"> | |
| <ol> | |
| <li><input type="radio" name="lomba" value="1">Tarik tambang (4 perempuan + 1 laki = 5 orang</input></li> | |
| <li><input type="radio" name="lomba" value="2">Lari Estafet(4 perempuan)</input></li> | |
| <li><input type="radio" name="lomba" value="3">Gobak Sodor (4 perempuan)</input></li> | |
| <li><input type="radio" name="lomba" value="4">Tartil (1 orang perwakilan TKA/TPA)</input></li> | |
| <li><input type="radio" name="lomba" value="5">Ceramah (1 orang perwakilan TKA/TPA)</input></li> | |
| </ol> | |
| </div> | |
| </div> | |
| <div class="ket"> | |
| <p>ket : Lingkari jenis lomba yang dipilih</p> | |
| </div> | |
| <div class="tanggal"> | |
| <p>Sangata <input type="date" required></p> | |
| </div> | |
| <div class="signature"> | |
| <div class="sig-left"> | |
| <p>Kepala Unit TKA/TPA</p> | |
| <input type="file" required> | |
| </div> | |
| <div class="sig-right"> | |
| <p>Peserta Lomba</p> | |
| <input type="file" required> | |
| </div> | |
| </div> | |
| <div class="submit-wrapper"> | |
| <input id="sub" type="submit"> | |
| </div> | |
| </form> | |
| </section> | |
| <script src="/assets/main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); | |
| *{ | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| body{ | |
| padding: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| section{ | |
| width: 400px; | |
| height: 400px; | |
| } | |
| form{ | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| border: solid black; | |
| border-radius: 8px; | |
| } | |
| .title{ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .input-container{ | |
| margin-bottom: 10px; | |
| } | |
| .input-wrapper{ | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .input-wrapper label{ | |
| margin-right: 10px; | |
| width: 200px; | |
| } | |
| .input-wrapper input{ | |
| border: none; | |
| display: block; | |
| margin-left: 10px; | |
| border-bottom: 2px dotted black; | |
| } | |
| .input-wrapper input:focus{ | |
| outline: none; | |
| } | |
| .list{ | |
| width: 100%; | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .left{ | |
| margin-right: 30px; | |
| } | |
| .left p{ | |
| font-size: 12px; | |
| } | |
| .right{ | |
| width: 70%; | |
| } | |
| .right ol li{ | |
| font-size: 12px; | |
| } | |
| .ket p{ | |
| font-size: 12px; | |
| } | |
| .tanggal{ | |
| margin-top: 50px; | |
| margin-bottom: -90px; | |
| width: 100%; | |
| text-align: right; | |
| } | |
| .signature{ | |
| margin: 0 auto; | |
| width: 360px; | |
| height: 200px; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| } | |
| .sig-left{ | |
| height: 100px; | |
| width: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-evenly; | |
| } | |
| .sig-right{ | |
| overflow: hidden; | |
| margin-right: -30px; | |
| height: 100px; | |
| width: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-evenly; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const form = document.getElementById("form") | |
| form.addEventListener("submit",function(){ | |
| window.alert("berhasil submit") | |
| }) |
Komentar
Posting Komentar