Tugas 4 Pemrograman Web C: Membuat Pencarian Kode Pos

index.html:

1:  <!DOCTYPE html>  
2:  <html lang="en">  
3:  <head>  
4:    <meta charset="UTF-8">  
5:    <link rel="stylesheet" href="styles.css" />  
6:    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
7:    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
8:    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">  
9:    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">  
10:    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
11:    <script src="script.js"></script>  
12:    <title>Kode Pos</title>  
13:  </head>  
14:  <body>  
15:    <div id="container">  
16:      <div class="main-container">  
17:        <h1>PENCARIAN KODE POS</h1>  
18:        <p>Cari kode pos di wilayah Indonesia dengan memasukkan beberapa kata kunci pencarian di bawah ini.</p>  
19:        <div class="table">  
20:          <div class="table-row">  
21:            <label class="input-label table-cell" for="provinsi">Provinsi:</label>  
22:            <input type="text" class="table-cell" id="provinsi" placeholder="Masukkan provinsi" size="23"/>  
23:          </div>  
24:          <div class="table-row">  
25:            <label class="input-label table-cell" for="kabkot">Kabupaten/Kota:</label>  
26:            <input type="text" class="table-cell" id="kabkot" placeholder="Masukkan kabupaten/kota" size="23"/>  
27:          </div>  
28:          <div class="table-row">  
29:            <label class="input-label table-cell" for="kecamatan">Kecamatan:</label>  
30:            <input type="text" class="table-cell" id="kecamatan" placeholder="Masukkan kecamatan" size="23"/>  
31:          </div>  
32:          <div class="table-row">  
33:            <label class="input-label table-cell" for="kelurahan">Kelurahan:</label>  
34:            <input type="text" class="table-cell" id="kelurahan" placeholder="Masukkan kelurahan" size="23"/>  
35:          </div>  
36:          <div class="table-row">  
37:            <label class="input-label table-cell" for="kodepos">Kode Pos:</label>  
38:            <input type="text" class="table-cell" id="kodepos" placeholder="Masukkan kode pos" size="23"/>  
39:          </div>  
40:        </div>  
41:        <input type="submit" id="Search_button" class="button" value="Search" />  
42:      </div>  
43:      <div id="search_result"></div>  
44:    </div>  
45:  </body>  
46:  </html>

styles.css:

1:  :root {  
2:    --background: rgba(242, 242, 242, 1);  
3:    --container-background: white;  
4:    --button-background: rgba(32, 191, 212, 0.5);  
5:    --button-background-hover: rgba(32, 191, 212, 1);  
6:    --text: black;  
7:    --shadow: rgba(0, 0, 0, 0.05);  
8:    --shadow-medium: rgba(0, 0, 0, 0.1);  
9:  }  
10:  * {  
11:    margin: 0;  
12:    padding: 0;  
13:    box-sizing: border-box;  
14:    font-family: 'Poppins', sans-serif;  
15:    color: var(--text);  
16:  }  
17:  body {  
18:    background-color: var(--background);  
19:  }  
20:  label {  
21:    display: block;  
22:  }  
23:  h1, h2 {  
24:    font-family: 'Raleway', sans-serif;  
25:    font-weight: bolder;  
26:  }  
27:  h1, h2, p {  
28:    margin-bottom: 15px;  
29:  }  
30:  input {  
31:    padding: 1px 3px;  
32:  }  
33:  #container {  
34:    margin: 30px 60px;  
35:  }  
36:  .main-container, #search_result {  
37:    max-width: 1080px;  
38:    margin: 25px auto;  
39:  }  
40:  .main-container {  
41:    background-color: var(--container-background);  
42:    padding: 50px;  
43:    border-radius: 1em;  
44:    box-shadow: 0px 15px 80px 20px var(--shadow);  
45:  }  
46:  .table-row {  
47:    display: table-row;  
48:  }  
49:  .table-cell {  
50:    display: table-cell;  
51:    margin-bottom: 7px;  
52:    padding-right: 18px;  
53:  }  
54:  .table {  
55:    margin-bottom: 15px;  
56:  }  
57:  .button {  
58:    padding: 8px 15px;  
59:    background-color: var(--button-background);  
60:    border-radius: 8px;  
61:    border-style: none;  
62:    transition: 0.15s;  
63:  }  
64:  .button:hover {  
65:    background-color: var(--button-background-hover);  
66:    color: var(--container-background);  
67:    cursor: pointer;  
68:  }  
69:  #search_card_container {  
70:    display: flex;  
71:    flex-wrap: wrap;  
72:    column-gap: 30px;  
73:  }  
74:  .search_card {  
75:    width: 270px;  
76:    padding: 15px;  
77:    border-radius: 8px;  
78:    background-color: var(--button-background);  
79:    margin-bottom: 30px;  
80:    transition: 0.2s;  
81:  }  
82:  .search_card p {  
83:    margin-bottom: 10px;  
84:  }  
85:  .search_card:hover {  
86:    box-shadow: 0px 15px 70px 15px var(--shadow-medium);  
87:    transform: scale(1.05, 1.05);  
88:  }  
89:  @media only screen and (max-width: 600px) {  
90:    #container {  
91:      margin: 30px;  
92:    }  
93:    .table-cell {  
94:      display: block;    
95:      margin-bottom: 5px;  
96:    }  
97:    .main-container {  
98:      padding: 30px;  
99:    }  
100:  }

script.js:

1:  $(document).ready(function(){  
2:    $.ajaxSetup({ async: false, cache: false });  
3:    function search() {  
4:      var provinsi = $.trim($('#provinsi').val()).toUpperCase();  
5:      var kabkot = $.trim($('#kabkot').val()).toUpperCase();  
6:      var kecamatan = $.trim($('#kecamatan').val()).toUpperCase();  
7:      var kelurahan = $.trim($('#kelurahan').val()).toUpperCase();  
8:      var kodepos = $.trim($('#kodepos').val());  
9:      var searchCount = 0;  
10:      $('#search_result').remove();  
11:      $('#container').append('<div id="search_result"></div>');  
12:      var searchDiv = $('#search_result');  
13:      $(searchDiv).append('<h2>HASIL PENCARIAN</h2>');  
14:      $(searchDiv).append('<p>Hasil pencarian kode pos dengan menggunakan kata kunci diatas <span id="search_desc"></span></p>');  
15:      $(searchDiv).append('<div id="search_card_container"></div>');  
16:      var searchCardContainer = $('#search_card_container');  
17:      $.getJSON("kodepos.json", function(result) {  
18:        $.each(result, function(key, val) {  
19:          if(val.province.search(provinsi) !== -1 &&  
20:          val.city.search(kabkot) !== -1 &&  
21:          val.sub_district.search(kecamatan) !== -1 &&  
22:          val.urban.search(kelurahan) !== -1 &&  
23:          val.postal_code.search(kodepos) !== -1) {  
24:            var searchCardDiv = $('<div class="search_card"></div');  
25:            $(searchCardContainer).append(searchCardDiv);  
26:            $(searchCardDiv).append('<p><b>Provinsi:</b> ' + val.province + '</p>');  
27:            $(searchCardDiv).append('<p><b>Kabupaten/Kota:</b> ' + val.city + '</p>');  
28:            $(searchCardDiv).append('<p><b>Kecamatan:</b> ' + val.sub_district + '</p>');  
29:            $(searchCardDiv).append('<p><b>Kelurahan:</b> ' + val.urban + '</p>');  
30:            $(searchCardDiv).append('<p><b>Kode Pos:</b> ' + val.postal_code + '</p>');  
31:            searchCount++;  
32:          }  
33:        });  
34:      });  
35:      if(searchCount != 0) {  
36:        $('#search_desc').html('telah ditemukan sebanyak ' + searchCount + ' buah.');  
37:      }  
38:      else {  
39:        $('#search_desc').html('tidak ditemukan.');  
40:      }  
41:    }  
42:    $('#Search_button').click(function() {  
43:      search();  
44:    });  
45:  });

Link Repository: https://github.com/brianakbar/Tugas4_PWebC_MembuatPencarianKodePos

Link Website: https://brianakbar.github.io/Tugas4_PWebC_MembuatPencarianKodePos/

Screenshot: