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
4. Hasil dari Pencarian Kode Pos Berdasarkan Provinsi dan Kabupaten yang Berisikan Informasi tentang Kecamatan, Desa, serta Kode Posnya
