Membuat Website Pencarian Kode Pos dengan Javascript
Nama : Gabriel Solomon Sitanggang
NRP : 5025201165
Link repository dapat diakses di
link berikut. Atau bisa dilihat langsung dibawah ini
1. 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">
<link rel="stylesheet" href="style.css">
<title>Postal Code</title>
</head>
<body>
<div class="box">
<div class="judul" id="judul">
<h1>🗺️ INDONESIAN POSTAL CODE 🗺️</h1>
</div>
<div class="flex">
<form id="form">
<div class="divInput">
<label class="judul">Select Province:</label>
<select class="btn" id="prov" name="provinsi" required>
<option value="" disabled selected>Select Province</option>
</select>
<label class="judul">Select District:</label>
<select class="btn" id="kab" name="kabupaten" required>
<option value="" disabled selected>Select District</option>
</select>
<label class="judul">Postal Code:</label>
<input class="btn" id="cari" type="number" placeholder="Masukan kode pos">
</div>
</form>
</div>
<div class="result">
</div>
</div>
<script type="module" src="main.js"></script>
</body>
</html>
2. style.css
body {
margin: 0px;
background-color: #3B9AE1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
.box {
background-color: #21E1E1;
flex-direction: column;
border: 2px solid black;
width: 50em;
height: 30em;
box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
}
.judul {
width: 100%;
height: 20%;
display: flex;
align-items: center;
justify-content: center;
color: #3120E0;
font-family: monospace;
font-size: larger;
animation: show 2.5s;
opacity: 1;
visibility: visible;
font-weight: bold;
}
.flex {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
form {
padding: 20px;
width: 40%;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
animation: show 2.5s;
opacity: 1;
visibility: visible;
}
.divInput {
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 8px;
}
.btn {
cursor: pointer;
padding: 5px;
border: 2px solid black;
background-color: #F0EABE;
color: black;
font-weight: bold;
width: 100%;
}
.btn:hover {
background-color: #3B9AE1;
color: #000000;
transition: 0.18s ease-in-out;
box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.75);
-webkit-transition: 0.18s ease-in-out;
-moz-transition: 0.18s ease-in-out;
-ms-transition: 0.18s ease-in-out;
-o-transition: 0.18s ease-in-out;
}
form select,
input {
margin-top: 20px;
width: 90%;
height: 30px;
border-radius: 4px;
}
form label {
margin-bottom: -10px;
font-size: 20px;
}
form h1{
display: block;
margin: 0 auto;
margin-top: -20px;
margin-bottom: 40px;
}
h3{
font-size: 14px;
font-weight: normal;
}
p{
font-size: 14px;
}
.result {
margin-top: 200px;
display: grid;
grid-template-columns: auto auto auto auto auto auto;
gap: 20px;
width: 100%;
justify-content: center;
}
.card {
background-color: tomato;
padding: 10px;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
width: 200px;
height: 200px;
border: solid black;
border-radius: 8px;
box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
animation: show 2.5s;
opacity: 1;
visibility: visible;
font-family: monospace;
font-size: larger;
}
.card:hover {
background-color: #3be140;
color: #000000;
transition: 0.18s ease-in-out;
box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.75);
-webkit-transition: 0.18s ease-in-out;
-moz-transition: 0.18s ease-in-out;
-ms-transition: 0.18s ease-in-out;
-o-transition: 0.18s ease-in-out;
}
@keyframes show {
0%{
opacity: 0;
visibility: hidden;
}
100%{
opacity: 1;
visibility: visible;
}
}
3. main.js
import data from "../data/data.json" assert {type: "json"}
let data_postal = []
const data_prov = []
const provinsi = document.querySelector("#prov")
const select = document.querySelector("#prov")
const select_kab = document.querySelector("#kab")
const kab = document.querySelector("#kab")
document.addEventListener('DOMContentLoaded', function () {
addprov()
setKab()
result()
form()
});
function setKab() {
provinsi.addEventListener("change", function () {
const id = provinsi.value
const postal = data.postal[id]
const option = document.createElement('option')
option.innerText = "Pilih Kabupaten";
option.setAttribute("selected",true)
option.setAttribute("disabled",true)
select_kab.innerText = ''
select_kab.append(option)
data_prov.push(postal)
const city = [...new Set(postal.map((data) => {
return data.city;
}))]
city.sort((a,b)=>{
let fa = a.toLowerCase()
let fb = b.toLowerCase()
if (fa < fb) {
return -1;
}
if (fa > fb) {
return 1;
}
return 0;
})
city.map((data) => {
makeOptionKab(data)
})
})
}
function addprov() {
const prov = Object.entries(data.province)
const data_baru = prov.map((data) => {
return data[1]
})
data_baru.sort((a,b)=>{
let fa = a.province_name.toLowerCase()
let fb = b.province_name.toLowerCase()
if (fa < fb) {
return -1;
}
if (fa > fb) {
return 1;
}
return 0;
})
data_baru.map((data)=>{
makeOption(data)
})
}
function makeOption(provinsi) {
const option = document.createElement('option')
option.innerText = provinsi.province_name;
option.setAttribute('value', provinsi.province_code)
select.append(option)
return select
}
function makeOptionKab(kabupaten) {
const option = document.createElement('option')
option.innerText = kabupaten;
option.setAttribute('value', kabupaten)
select_kab.append(option)
return select
}
function result() {
kab.addEventListener("change", function () {
const elemet = document.getElementsByClassName("card")
if(elemet.length != 0){
for(let i = 0,card ;card = elemet[i];i++)
elemet[i].remove()
}
const value = kab.value;
const result = data_prov[0].filter((data) => {
if ( value == data.city) return data
})
result.map((data) => {
data_postal.push(data)
})
data_postal.map((data)=>{
makeResult(data)
})
data_postal = []
})
}
function makeResult(data) {
const container = document.querySelector(".result");
const div = document.createElement("div")
const title = document.createElement("h3")
const kecamanatan = document.createElement("h3")
const p = document.createElement("p")
title.innerText = `Desa : ${data.urban}`
kecamanatan.innerText = `Kecamatan : ${data.sub_district}`
p.innerText = `kode pos: ${data.postal_code}`
div.classList.add("card")
div.append(kecamanatan,title,p)
container.append(div)
return container
}
function form(){
const cariForm = document.getElementById("form")
cariForm.addEventListener("submit",function(e){
e.preventDefault()
const title = document.getElementsByTagName("p");
const cari = document.querySelector("#cari")
const filter = document.getElementsByClassName("card");
const value = cari.value;
for (let i = 0, list; list = title[i]; i++) {
let text = list.innerHTML;
if (text.indexOf(value) > -1) {
filter[i].style.display = "";
} else if (value.length == 0) {
console.log("hai");
} else
filter[i].style.display = "none";
}
})
}
Untuk tampilan dapat dilihat di bawah ini :
1. Tampilan Awal
2. Tampilan Memilih Provinsi yang Akan Dicari Kode Posnya
3. Tampilan Memilih Kabupaten yang Akan Dicari Kode Posnya
4. Hasil dari Pencarian Kode Pos Berdasarkan Provinsi dan Kabupaten yang Berisikan Informasi tentang Kecamatan, Desa, serta Kode Posnya
5. Dapat Juga Langsung Dicari Berdasarkan Kode Posnya yang Akan Menampilkan Informasi tentang Kecamatan, Desa, serta Kode Posnya
