Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <title>Tugas Praktikum 1</title>
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
- <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
- <style type="text/css">
- body {
- background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%) !important;
- padding-top: 1em;
- };
- </style>
- <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
- <script>
- $( document ).ready(function() {
- $("#info").hide();
- $('#tanggal-lahir').datepicker({
- dateFormat: 'yy-mm-dd',
- changeYear: true,
- });
- });
- $(function () {
- $("#cek").bind("click", function (e) {
- e.preventDefault();
- if ($('#nama').val() == '' || $('#alamat').val() == '' || $('#tanggal-lahir').val() == '') {
- alert ('Diisi dulu dong kakak :)')
- } else {
- // Hitung ultah
- var mdate = $("#tanggal-lahir").val().toString();
- var yearThen = parseInt(mdate.substring(0,4), 10);
- var monthThen = parseInt(mdate.substring(5,7), 10);
- var dayThen = parseInt(mdate.substring(8,10), 10);
- var today = new Date();
- var birthday = new Date(yearThen, monthThen-1, dayThen);
- var differenceInMilisecond = today.valueOf() - birthday.valueOf();
- var year_age = Math.floor(differenceInMilisecond / 31536000000);
- var day_age = Math.floor((differenceInMilisecond % 31536000000) / 86400000);
- var month_age = Math.floor(day_age/30);
- day_age = day_age % 30;
- var info = ('<p>Nama kamu adalah <b>'+$('#nama').val()+'</b> </p>'+
- '<p>Tempat tinggalmu di <b>'+$('#alamat').val()+'</b> </p>'+
- '<p>Kamu lahir pada tanggal <b>'+$('#tanggal-lahir').val()+'</b></p>'+
- '<p>Mmm, saat ini umurmu pasti <b>'+year_age+' tahun</b> , <b>'+month_age+' bulan</b>, <b>'+day_age+' hari</b> . Ya kan?</p>');
- $("#info p").remove();
- $("#info").show();
- $("#info").append(info);
- }
- });
- });
- </script>
- </head>
- <body>
- <div class="container">
- <div class="row justify-content-md-center">
- <div class="col col-lg-6">
- <h4 class="text-center">Tugas Praktikum 1</h3>
- <h3 class="text-center">Cek Umur</h3>
- <form>
- <div class="form-group">
- <label for="nama">Nama Kamu</label>
- <input type="text" autocomplete="off" class="form-control" id="nama" placeholder="Alwi Adib Novianto" required>
- </div>
- <div class="form-group">
- <label for="alamat">Alamat</label>
- <input type="text" autocomplete="off" class="form-control" id="alamat" placeholder="Jakarta Barat" required>
- </div>
- <div class="form-group">
- <label for="tanggal-lahir">Tanggal Lahir Kamu</label>
- <input type="text" autocomplete="off" class="form-control" id="tanggal-lahir" placeholder="yyyy-mm-dd" required>
- </div>
- <div class="form-group">
- <button type="submit" class="btn btn-primary" id="cek">Cek</button>
- </div>
- </form>
- <!-- Info -->
- <div id="info" class="alert alert-warning">
- </div>
- </div>
- </div>
- </div>
- </body>
- <blockquote class="blockquote text-center">
- <footer class="footer"><h6>Alwi Adib Novianto - 2017103634</h6></footer>
- </blockquote>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
