Postal Code with Vanila Javascipt

 

 Postal Code Finder with Javascript

Tugas 3: Membuat web untuk menemukan kode pos suatu daerah tertentu

Nama: Muhammad Yunus

NRP: 5025021171

Kelas: PWEB B

Materi: Javascript

Pada tugas ini ditekankan pada penggunaan Vanila Javascript. Disini saya membuat sebuah web dengan kemampuan untuk menemukna kode pos suatu daerah tertentu.

Pada web ini, user akan diminta untuk memasukkan/memilih nama daerah yang mereka inginkan di Indonesia mulai dari nama provinsi, kota/kabupaten, kecamatan, dan kelurahan.

Disini saya menggunakan bantuan sebuah data yang telah dalam format .json dari link berikut ini: kode pos indonesia .

Detail yang disediakan pada data tersebut ialah data dalam format .json dengan contoh sebagai berikut:

{"province":"Bali","city":"Badung","district":"Kuta","subdistrict":"Tuban","postal_code":"80361"},

Dengan data tersebut saya membuat sebuah javascript untuk melakukan prose fetching dan memimalah data yang diinginkan yang saya letakkan pada fetch.js seperti berikut

	const load = async () => {
	const response = await fetch('data.json');
	const data = await response.json();
	console.log(data)
	return data;
	}
	const show = async () => {
	const {data} = await load();
	const bali = data.filter((item) => item.province === "Bali")
	console.log(bali)
	}
	const unique = (value, index, self) => {
	return self.indexOf(value) === index
	}
	const getProvince = async () => {
	const {data} = await load();
	const province = data.map(item => item.province).filter(unique)
	return province
	}
	const getCity = async (province) => {
	const {data} = await load();
	const city = data.filter(item => item.province === province).map(item => item.city).filter(unique)
	console.log(city, city);
	return city
	}
	const getDistrict = async (city) => {
	const {data} = await load();
	const district = data.filter(item => item.city === city).map(item => item.district).filter(unique)
	console.log(district, district);
	return district
	}
	const getSubDistrict = async (district) => {
	const {data} = await load();
	const subDistrict = data.filter(item => item.district === district).map(item => item.subdistrict).filter(unique)
	console.log(subDistrict, subDistrict);
	return subDistrict
	}
	const getPostalCode = async (subDistrict) => {
	const {data} = await load();
	const postalCode = data.find (item => item.subdistrict === subDistrict).postal_code
	console.log(postalCode, postalCode);
	return postalCode
	}

view raw fetch.js hosted with ❤ by GitHub

Selanjutnya saya juga membuat script main.js yang akan mengatur semua logic dalam penggunan data yang sudah difetch untuk ditampilkan pada web, disini saya memanfaatkan DOM. Dengan source-code sebagai berikut:

	const clearChild = (scope, n = 0) => {
	var list = document.querySelector(`.list-${scope}`);
	while (list.children.item(n)) {
	list.removeChild(list.lastChild);
	}
	}
	const makeList = (data, scope, childScope, lvl = 0) => {
	// get element
	var list = document.querySelector(`.list-${scope}`);
	var link = document.querySelector(`.${scope}`)
	link.addEventListener(`click`, function(e){
	e.preventDefault();
	list.classList.toggle(`active`);
	})
	var li = document.createElement(`li`);
	li = document.createElement(`li`);
	li.innerHTML = "reset";
	li.addEventListener(`click`, function(){
	var text = this.innerHTML;
	var icon = `<i class="fa fa-chevron-down"></i>`;
	link.innerHTML = `Select ${scope} ${icon}`;
	list.classList.toggle(`active`);
	clearChild(childScope);
	})
	list.appendChild(li);
	data.map (item => {
	li = document.createElement(`li`);
	li.innerHTML = item;
	li.addEventListener(`click`, function(){
	var text = this.innerHTML;
	var icon = `<i class="fa fa-chevron-down"></i>`;
	link.innerHTML = text+icon;
	list.classList.toggle(`active`);
	clearChild(childScope);
	if (lvl == 0) {
	callCity(text);
	} else if (lvl == 1) {
	callDistrict(text);
	} else if (lvl == 2) {
	callSubDistrict(text);
	} else {
	callPostalCode(text);
	}
	})
	list.appendChild(li);
	})
	}
	//get provinces
	getProvince().then((data) => {
	makeList(data, 'province', 'city');
	});
	// get City
	const callCity = (provinces) => {
	getCity(provinces).then((data) => {
	makeList(data, 'city', 'district', 1);
	});
	}
	// get District
	const callDistrict = (city) => {
	getDistrict(city).then((data) => {
	makeList(data, 'district', 'subDistrict', 2);
	});
	}
	// get SubDistrict
	const callSubDistrict = (district) => {
	getSubDistrict(district).then((data) => {
	makeList(data, 'subDistrict', 'postalCode', 3);
	});
	}
	// get PostalCode
	const callPostalCode = (subDistrict) => {
	getPostalCode(subDistrict).then((data) => {
	h1 = document.createElement(`h1`);
	h1.innerHTML = data;
	document.querySelector(`.postalCode`).appendChild(h1);
	});
	}

view raw main.js hosted with ❤ by GitHub

Berikut merupakan struktur HTML web tersebut:

	<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
	<title>javascript postalcode</title>
	<link rel="stylesheet" href="./main.css">
	<link rel="stylesheet" href="./component.css">
	</head>
	<body onload="load()">
	<header class="header">
	<nav class="nav">
	<div>
	<a href="#intro" class="my">MY</a>
	</div>
	</nav>
	</header>
	<main class="main" >
	<section style="margin:auto; background-color:aliceblue; color:blueviolet;">
	<p style="display:block;">
	Your Postal Code is:
	</p>
	<div class="list-postalCode postalCode" style="margin:auto; text-align: center; font-size: x-large; font-weight: 700;">
	<!-- postal code is here -->
	</div>
	</section>
	<div style="margin: auto">
	<button class="btn" onclick="window.location.reload()">Clear</button>
	</div>
	<div style="margin: auto; color: gainsboro;">
	<p>Harap tunggu page diload secara sempurna sebelum menggunakan fitur</p>
	</div>
	<section id="main_form">
	<div class="dropdown">
	<a href="#" class="js-link province">Select Provinces<i class="fa fa-chevron-down"></i></a>
	<ul class="list-province active">
	<!-- list is here -->
	</ul>
	</div>
	<div class="dropdown">
	<a href="#" class="js-link city">Select City<i class="fa fa-chevron-down"></i></a>
	<ul class="list-city active">
	<!-- list is here -->
	</ul>
	</div>
	<div class="dropdown">
	<a href="#" class="js-link district">Select Kecamatan<i class="fa fa-chevron-down"></i></a>
	<ul class="list-district active ">
	<!-- list is here -->
	</ul>
	</div>
	<div class="dropdown">
	<a href="#" class="js-link subDistrict">Select Kelurahan<i class="fa fa-chevron-down"></i></a>
	<ul class="list-subDistrict active">
	<!-- list is here -->
	</ul>
	</div>
	</section>
	</main>
	<script type="text/javascript" src="./fetch.js"></script>
	<script type="text/javascript" src="./main.js"></script>
	<footer >
	<span >© 2022 Muhammad Yunus</span>
	<ul >
	<li></li>
	<li>
	<a href="https://www.instagram.com/snymnd/" class=" "><i class="fa fa-instagram"></i></a>
	</li>
	<li>
	<a href="https://github.com/snymnd" class=""> <i class="fa fa-github"></i></a>
	</li>
	<li>
	<a href="https://www.linkedin.com/in/muhammad-yunus-68920021b/" class="mr-4 "><i class="fa fa-linkedin"></i></a>
	</li>
	<li>
	<a href="mailto: muh.yunus310502@gmail.com" ><i class="fa fa-envelope "></i></a>
	</li>
	</ul>
	</footer>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Source:

Repository

Deployment/web