<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kamus Tempat & Bangunan</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
max-width: 750px;
margin: 2rem auto;
padding: 0 1rem;
background-color: #fdfdfd;
}
h2 {
text-align: center;
color: #2c3e50;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 2px solid #3498db;
}
.kotak-cari {
width: 100%;
padding: 0.9rem;
font-size: 1rem;
border: 2px solid #bdc3c7;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.kotak-cari:focus {
outline: none;
border-color: #3498db;
}
.daftar-kamus {
display: grid;
gap: 1rem;
}
.kartu-kata {
display: flex;
gap: 1rem;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
border-left: 4px solid #3498db;
}
.gambar {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 6px;
background-color: #f0f0f0;
}
.info {
flex: 1;
}
.indo {
font-size: 1.1rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 0.3rem;
}
.inggris {
color: #2980b9;
font-style: italic;
margin-bottom: 0.3rem;
}
.baca {
color: #7f8c8d;
font-size: 0.9rem;
}
.pesan-kosong {
text-align: center;
padding: 2rem;
color: #7f8c8d;
}
</style>
</head>
<body>
<h2>🏛️ Kamus Tempat & Bangunan</h2>
<input type="text" id="kataCari" class="kotak-cari" placeholder="Cari kata: masjid, gerobak, toko, dll...">
<div id="tampilanKamus" class="daftar-kamus"></div>
<script>
// ==============================================
// DATA KAMUS - EDIT BAGIAN INI SAJA
// ==============================================
const dataKamus = [
{
indo: "Masjid",
inggris: "Mosque",
baca: "*mosk*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Masjid_Agung_Surabaya.jpg/640px-Masjid_Agung_Surabaya.jpg"
},
{
indo: "Gereja",
inggris: "Church",
baca: "*cerc*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Gereja_Katedral_Jakarta.jpg/640px-Gereja_Katedral_Jakarta.jpg"
},
{
indo: "Pura",
inggris: "Temple",
baca: "*tem-pel*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Pura_Taman_Ayun.jpg/640px-Pura_Taman_Ayun.jpg"
},
{
indo: "Wihara",
inggris: "Monastery",
baca: "*mo-nas-te-ri*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Wihara_Buddha.jpg/640px-Wihara_Buddha.jpg"
},
{
indo: "Kelenteng",
inggris: "Chinese Temple",
baca: "*cai-nis tem-pel*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Kelenteng_Sam_Po_Kong.jpg/640px-Kelenteng_Sam_Po_Kong.jpg"
},
{
indo: "Gerobak dorong jualan",
inggris: "Street cart",
baca: "*strit kart*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Gerobak_makanan.jpg/640px-Gerobak_makanan.jpg"
},
{
indo: "Gedung tinggi",
inggris: "Skyscraper",
baca: "*skai-skrei-per*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Jakarta_Skyline.jpg/640px-Jakarta_Skyline.jpg"
},
{
indo: "Pabrik",
inggris: "Factory",
baca: "*fak-to-ri*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Factory_building.jpg/640px-Factory_building.jpg"
},
{
indo: "Pasar",
inggris: "Market",
baca: "*mar-ket*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Pasar_Baru_Jakarta.jpg/640px-Pasar_Baru_Jakarta.jpg"
},
{
indo: "Toko pinggir jalan",
inggris: "Street shop / Stall",
baca: "*strit syop / stol*",
gambar: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Toko_kelontong.jpg/640px-Toko_kelontong.jpg"
}
];
// ==============================================
// ALGORITMA PENCARIAN
// ==============================================
const inputCari = document.getElementById('kataCari');
const wadah = document.getElementById('tampilanKamus');
function tampilkanKata(kunci = "") {
wadah.innerHTML = "";
kunci = kunci.toLowerCase().trim();
const hasil = dataKamus.filter(item =>
item.indo.toLowerCase().includes(kunci) ||
item.inggris.toLowerCase().includes(kunci)
);
if (hasil.length === 0) {
wadah.innerHTML = `<div class="pesan-kosong">Kata tidak ditemukan 😕</div>`;
return;
}
hasil.forEach(item => {
const kartu = document.createElement('div');
kartu.className = 'kartu-kata';
kartu.innerHTML = `
<img src="${item.gambar}" alt="${item.indo}" class="gambar" loading="lazy">
<div class="info">
<div class="indo">${item.indo}</div>
<div class="inggris">${item.inggris}</div>
<div class="baca">Cara baca: ${item.baca}</div>
</div>
`;
wadah.appendChild(kartu);
});
}
inputCari.addEventListener('input', () => tampilkanKata(inputCari.value));
tampilkanKata(); // Tampilkan semua saat halaman dibuka
</script>
</body>
</html>
0 komentar:
Posting Komentar