PWEB A - Tugas 3 - Membuat Website Pencarian Kode Pos Indonesia

Tugas 3 - Membuat Website Pencarian Kode Pos Indonesia

20 September 2022

Pada tugas 3 ini kita dimina membuat situs pencarian kode pos indonesia dengan menggunakan javascript agar bisa menampilkan halaman website yang kita punya dengan dinamis.

Untuk dapat memiliki fitur pencarian kode pos indonesia, saya menggunakan bantuan 2 API

https://ibnux.github.io/data-indonesia/ (Untuk menampilkan nama provinsi, kabupaten, kecamatan, dan kelurahan)
https://kodepos.vercel.app/search (Untuk mencari kode pos berdasarkan alamat)

Link Website Kode Pos Indonesia

Link Repository Github

Screenshoot

Source Code

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" />
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <title>Kode Pos Indonesia</title>
  </head>
  <body>
    <nav>
      <img class="flag" width="100" alt="Flag of Indonesia" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/512px-Flag_of_Indonesia.svg.png" />
      <h1>Kode Pos Indonesia</h1>
    </nav>
    <main>
      <section id="content">
        <p>Cari kode pos di wilayah Indonesia dengan memasukkan beberapa kata kunci pencarian di bawah ini.</p>
        <label for="provinsi">Provinsi</label>
        <select name="provinsi" id="provinsi" onchange="showKabupaten()"></select>
        <label for="kabupaten">Kabupaten</label>
        <select name="kabupaten" id="kabupaten" onchange="showKecamatan()"></select>
        <label for="kecamatan">Kecamatan</label>
        <select name="kecamatan" id="kecamatan" onchange="showKelurahan()"></select>
        <label for="kelurahan">Kelurahan</label>
        <select name="kelurahan" id="kelurahan""></select>
        <button id="button" onclick="showKodePos()">Kode Pos</button>
      </section>
      <section id="result" class="hidden">
        <h2>Hasil Pencarian</h2>
        <p>Berikut adalah hasil pencarian kode pos berdasarkan kata kunci yang telah dimasukkan.</p>
        <div class="result-content">
            <div id="result-title">
                Keputih
            </div>
            <div id="result-desc">
                Kode pos <span id="result-kode-pos">60111</span> untuk daerah <span id="result-kelurahan">Pademawu</span>, Kecamatan <span id="result-kecamatan">Padewau Timur</span>, <span id="result-kabupaten">KAB. Pamekasan</span>, <span id="result-provinsi">JAWA TIMUR</span>
            </div>
        </div>
      </section>
    </main>
    <footer>
      <p>All rights reserved. &copy; by <a href="https://www.linkedin.com/in/arief-badrus-sholeh/">Arief Badrus Sholeh</a></p>
    </footer>

    <!-- Javascript -->
    <script src="main.js"></script>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  font-family: "Roboto Slab", serif;
  background-color: #f2ece9;
}

h1,
h2,
h3 {
  font-weight: 700;
  margin: 20px 0;
}

h1 {
  color: #f2ece9;
  font-size: 28px;
}

h2 {
  font-size: 36px;
}

a {
  text-decoration: none;
  color: #b40d1a;
  transition: 0.5s;
}

a:hover {
  color: black;
  transition: 0.5;
  text-decoration: underline;
}

nav {
  background: rgb(180, 13, 26);
  background: linear-gradient(355deg, rgba(180, 13, 26, 1) 0%, rgba(203, 88, 92, 1) 50%, rgba(180, 13, 26, 1) 100%);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.flag {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 100%;
}

main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#content {
  background-color: white;
  width: 80%;
  padding: 36px;
}

#result {
  width: 80%;
  padding: 36px;
}

label {
  display: block;
  font-weight: 700;
  font-size: 18px;
  margin: 20px 0 8px 0;
}

select {
  width: 300px;
  height: 18px;
  border-radius: 24px;
  padding: 10px;
  box-sizing: content-box;
  font-size: 16px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

button {
  padding: 6px 36px;
  display: block;
  margin: 20px 0;
  border-radius: 6px;
  background-color: #b40d1a;
  border: 0px;
  font-size: 18px;
  font-weight: 700;
  color: #f2ece9;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  transition: 0.3s;
}

button:hover {
  background-color: #f2ece9;
  color: #b40d1a;
  cursor: pointer;
  transition: 0.3s;
}

footer {
  text-align: center;
  padding: 10px;
}

.result-content {
  width: 30%;
  margin: 20px 0;
}

#result-title {
  width: 100%;
  border-radius: 12px 12px 0px 0px;
  padding: 16px;
  background-color: lightgreen;
}
#result-desc {
  width: 100%;
  border-radius: 0 0 12px 12px;
  padding: 16px;
  background-color: rgb(209, 228, 209);
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

span#result-kode-pos {
  font-weight: 700;
  font-size: 18px;
}

.hidden {
  display: none;
}

.mt-100 {
  margin-top: 100px;
}

.green {
  background-color: lightgreen;
  color: black;
}

Javascript

const provinsi = document.getElementById("provinsi");
const kabupaten = document.getElementById("kabupaten");
const kecamatan = document.getElementById("kecamatan");
const kelurahan = document.getElementById("kelurahan");

const getProvinsi = async () => {
  const response = await fetch("https://ibnux.github.io/data-indonesia/provinsi.json");
  const data = await response.json();
  return data;
};
const getKabupaten = async (id) => {
  const response = await fetch(`https://ibnux.github.io/data-indonesia/kabupaten/${id}.json`);
  const data = await response.json();
  return data;
};
const getKecamatan = async (id) => {
  const response = await fetch(`https://ibnux.github.io/data-indonesia/kecamatan/${id}.json`);
  const data = await response.json();
  return data;
};
const getKelurahan = async (id) => {
  const response = await fetch(`https://ibnux.github.io/data-indonesia/kelurahan/${id}.json`);
  const data = await response.json();
  return data;
};
const getResult = async (key) => {
  const response = await fetch(`https://kodepos.vercel.app/search?q=${key}`);
  const data = await response.json();
  return data;
};

const removeData = (element) => {
  while (element.hasChildNodes()) {
    element.removeChild(element.firstChild);
  }
};

const showProvinsi = async () => {
  const options = await getProvinsi();
  provinsi.value = options[0];
  options.forEach((element) => {
    const newOption = document.createElement("option");
    newOption.value = element.id;
    newOption.text = element.nama;
    provinsi.appendChild(newOption);
  });
  showKabupaten();
};
const showKabupaten = async () => {
  removeData(kabupaten);
  const options = await getKabupaten(provinsi.value);
  kabupaten.value = options[0];
  options.forEach((element) => {
    const newOption = document.createElement("option");
    newOption.value = element.id;
    newOption.text = element.nama;
    kabupaten.appendChild(newOption);
  });
  showKecamatan();
};
const showKecamatan = async () => {
  removeData(kecamatan);
  const options = await getKecamatan(kabupaten.value);
  kecamatan.value = options[0];
  options.forEach((element) => {
    const newOption = document.createElement("option");
    newOption.value = element.id;
    newOption.text = element.nama;
    kecamatan.appendChild(newOption);
  });
  showKelurahan();
};
const showKelurahan = async () => {
  removeData(kelurahan);
  const options = await getKelurahan(kecamatan.value);
  kelurahan.value = options[0];
  options.forEach((element) => {
    const newOption = document.createElement("option");
    newOption.value = element.id;
    newOption.text = element.nama;
    kelurahan.appendChild(newOption);
  });
};

const button = document.getElementById("button");
const result = document.getElementById("result");
const resultTitle = document.getElementById("result-title");
const resultKodePos = document.getElementById("result-kode-pos");
const resultKelurahan = document.getElementById("result-kelurahan");
const resultKecamatan = document.getElementById("result-kecamatan");
const resultKabupaten = document.getElementById("result-kabupaten");
const resultProvinsi = document.getElementById("result-provinsi");
const content = document.getElementById("content");
const showKodePos = async () => {
  button.innerHTML = "memuat";

  const kodePos = await getResult(kelurahan.options[kelurahan.selectedIndex].text);

  button.innerHTML = "Berhasil";
  button.classList.add("green");

  resultKodePos.innerHTML = kodePos.data[0].postalcode;
  resultTitle.innerHTML = kelurahan.options[kelurahan.selectedIndex].text;
  resultKelurahan.innerHTML = kelurahan.options[kelurahan.selectedIndex].text;
  resultKecamatan.innerHTML = kecamatan.options[kecamatan.selectedIndex].text;
  resultKabupaten.innerHTML = kabupaten.options[kabupaten.selectedIndex].text;
  resultProvinsi.innerHTML = provinsi.options[provinsi.selectedIndex].text;

  result.classList.remove("hidden");
  content.classList.add("mt-100");
};

showProvinsi();

Nama : Arief Badrus Sholeh

NRP : 5025201228

Kelas : Pemrograman Web A

Tahun : 2022/2023

Arief Badrus Sholeh

Cari Blog Ini

PWEB A - Tugas 3 - Membuat Website Pencarian Kode Pos Indonesia

Tugas 3 - Membuat Website Pencarian Kode Pos Indonesia

Komentar

Posting Komentar