Selasa, 20 September 2022

Pemrograman Web C | Tugas 4

 

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



di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Pemrograman Web C | EAS

5025201165 - Gabriel Solomon Sitanggang SOAL Kementrian Kelautan dan Perikanan sedang membutuhkan pegawai baru untuk menjalankan tugas di wi...