Pemrograman Web Tugas 3 - Membuat Website Pencarian Kode Pos Indonesia
Muhammad Lintang Panjerino
5025201045
Pemrograman Web Kelas B
Tugas 3 mata kuliah Pemrograman Web Kelas B adalah membuat website pencarian kode pos di negara Indonesia. Saya mengambil data dari website https://cekongkir.net/download-kode-pos-se-indonesia/ . Website pencarian kode pos ini saya buat dengan menggunakan HTML, CSS, dan JavaScript. Source code dari website ini terletak pada sebuah repository di akun Github saya dan sudah di-deploy menggunakan Github Pages.
Link Website Kode Pos: https://mlintang20.github.io/pemrograman-web-tugas-3/
Link Repository Github: https://github.com/mlintang20/pemrograman-web-tugas-3
Berikut adalah screenshot dari website tersebut:
Dan berikut adalah potongan source code dari website tersebut:
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" />
<title>Kode Pos Indonesia</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Website Pencarian Kode Pos Indonesia</h1>
</header>
<main>
<h2>Telusuri kode pos dengan menekan drop down di bawah</h2>
<div class="searchBox">
<select id="provinsi"></select>
<select id="kota"></select>
<select id="kecamatan"></select>
<select id="kelurahan"></select>
</div>
</main>
<footer>
<div>Pemrograman Web B Tugas 3 © September 2022, Muhammad Lintang Panjerino</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
/* background-color: rgb(73, 236, 236); */
background: linear-gradient(45deg, #025661, #196f7a, #70b7c0, #b2e8f0);
background-size: 200% 200%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header {
display: flex;
justify-content: center;
padding: 20px 0;
color: #fff;
background-color: #e60c2c;
}
main {
margin-top: 100px;
height: 90vh;
}
main h2 {
margin-bottom: 40px;
text-align: center;
text-transform: capitalize;
font-weight: 900;
color: #242424;
}
main .searchBox {
display: flex;
flex-direction: column;
width: 500px;
margin: 0px auto;
}
main .searchBox select {
text-align: center;
font-size: 1em;
margin-bottom: 20px;
height: 40px;
border-radius: 20px;
}
footer {
color: #fff;
background-color: #e60c2c;
padding: 15px;
text-align: center;
}
main.js:
function makeDropDown(data, filtersAsArray, targetElement) {
const filteredArray = filterArray(data, filtersAsArray);
const uniqueList = getUniqueValues(filteredArray, filtersAsArray.length);
populateDropDown(targetElement, uniqueList);
}
function applyDropDown() {
const selectProvinsiValue = document.getElementById("provinsi").value;
const selectKota = document.getElementById("kota");
makeDropDown(data_kodepos, [selectProvinsiValue], selectKota);
applyDropDown2();
}
function applyDropDown2() {
const selectProvinsiValue = document.getElementById("provinsi").value;
const selectKotaValue = document.getElementById("kota").value;
const selectKecamatan = document.getElementById("kecamatan");
makeDropDown(data_kodepos, [selectProvinsiValue, selectKotaValue], selectKecamatan);
applyDropDown3();
}
function applyDropDown3() {
const selectProvinsiValue = document.getElementById("provinsi").value;
const selectKotaValue = document.getElementById("kota").value;
const selectKecamatanValue = document.getElementById("kecamatan").value;
const selectKelurahan = document.getElementById("kelurahan");
makeDropDown(data_kodepos, [selectProvinsiValue, selectKotaValue, selectKecamatanValue], selectKelurahan);
}
function afterDocumentLoads() {
populateFirstLevelDropDown();
applyDropDown();
}
function getUniqueValues(data, index) {
const uniqueOptions = new Set();
data.forEach((r) => uniqueOptions.add(r[index]));
return [...uniqueOptions];
}
function populateFirstLevelDropDown() {
const uniqueList = getUniqueValues(data_kodepos, 0);
const el = document.getElementById("provinsi");
populateDropDown(el, uniqueList);
}
function populateDropDown(el, listAsArray) {
el.innerHTML = "";
listAsArray.forEach((item) => {
const option = document.createElement("option");
option.textContent = item;
el.appendChild(option);
});
}
function filterArray(data, filtersAsArray) {
return data.filter((r) => filtersAsArray.every((item, i) => item === r[i]));
}
document.getElementById("provinsi").addEventListener("change", applyDropDown);
document.getElementById("kota").addEventListener("change", applyDropDown2);
document.getElementById("kecamatan").addEventListener("change", applyDropDown3);
document.addEventListener("DOMContentLoaded", afterDocumentLoads);
Komentar
Posting Komentar