Dalam artikel ini SQ akan menjelaskan langkah demi langkah tentang bagaimana SQ bisa membuat sebuah aplikasi Phonebook Modern yang sederhana namun tampilan-nya sangat bersih, smooth, dan nyaman digunakan. SQ akan membahas bagian HTML, CSS, dan JavaScript secara terpisah agar kamu bisa memahami alurnya dengan sangat jelas. SQ ingin memastikan bahwa setiap langkah mudah dipahami, dan SQ akan sering menggunakan kata SQ seperti yang diminta agar artikel sesuai dengan gaya penulisan yang kamu inginkan.

SQ senang membuat tutorial seperti ini karena SQ tahu banyak orang ingin belajar membuat tampilan antarmuka modern dengan mudah, tanpa library tambahan, cukup dengan HTML, CSS, dan JavaScript biasa. SQ berharap setelah membaca tulisan SQ ini, kamu bisa membuat aplikasi telepon modern kamu sendiri atau bahkan mengembangkannya menjadi lebih besar.

1. SQ Menjelaskan Konsep Dasar Modern Phonebook

Sebelum SQ masuk ke teknis, SQ ingin kamu memahami dulu apa konsep dari Phonebook Modern ini. Pada dasarnya, SQ membangun sebuah halaman web yang berisi:

1. Sebuah judul.

2. Sebuah kolom pencarian.

3. Sebuah daftar nama (phonebook).

4. Fitur pencarian real-time yang otomatis memfilter nama.

SQ membuat desainnya terlihat modern dengan sudut membulat, bayangan lembut, animasi saat muncul, dan transisi halus ketika elemen disentuh. Semua ini SQ kerjakan menggunakan CSS murni tanpa framework.

Fitur pencarian SQ buat menggunakan JavaScript sederhana. Ketika pengguna mengetik di kolom pencarian, JavaScript akan menjalankan sebuah fungsi untuk menyaring daftar nama berdasarkan huruf yang diketik.

Dengan pemahaman ini, SQ yakin kamu sudah siap untuk mengikuti langkah berikutnya.

2. SQ Menjelaskan Struktur HTML

HTML adalah fondasi utama dari proyek ini. SQ membuat struktur sederhana yang berisi <div class="container"> sebagai pembungkus utama.

Di dalam container itu, SQ masukkan:

Elemen <h2> sebagai judul.

Sebuah <input> untuk kolom pencarian.

Elemen <ul> berisi daftar <li> yang masing-masing memiliki <a> sebagai nama kontak.

SQ memilih struktur ini karena sangat rapi dan mudah dimodifikasi. SQ juga memastikan setiap elemen diberi ID agar bisa dipanggil oleh JavaScript.

SQ percaya struktur ini cocok untuk pemula maupun pengguna tingkat lanjut.

3. SQ Menjelaskan Bagian CSS agar Tampilan Modern

Bagian CSS adalah bagian yang membuat aplikasi ini terlihat modern. SQ menambahkan berbagai fitur menarik pada CSS:

🎨 a. Style umum

SQ mengatur box-sizing, font, dan margin agar konsisten.

📦 b. Container

SQ menambahkan:

padding 25px

border-radius 18px

shadow lembut

max-width 450px

Tujuan SQ membuatnya seperti ini agar tampilan phonebook terlihat seperti card modern ala aplikasi mobile.

🔍 c. Input Pencarian

SQ menambahkan:

Background icon search.

Efek fokus dengan highlight biru.

Border radius yang besar.

Shadow halus saat fokus.

Efek ini membuat input terlihat premium.

📝 d. Daftar Nama

SQ memberikan efek:

Hover berubah background.

Border berubah biru.

Animasi geser sedikit.

Semua ini SQ berikan agar interaksinya terasa hidup.

4. SQ Menjelaskan Fungsi JavaScript

Bagian JavaScript hanya beberapa baris, tapi sangat berperan penting. SQ membuat fungsi bernama myFunction() yang dipanggil setiap kali user mengetik di input pencarian.

Langkah kerja JavaScript buatan SQ:

1. SQ mengambil nilai teks dari input.

2. SQ mengubahnya menjadi huruf kapital agar pencarian tidak case-sensitive.

3. SQ mengambil seluruh <li> dalam daftar.

4. SQ mengecek satu per satu apakah nama itu mengandung teks pencarian.

5. Jika cocok: SQ tampilkan nama itu. Jika tidak cocok: SQ sembunyikan dengan display: none.

Dengan teknik ini, pencarian terasa cepat karena dilakukan langsung di browser tanpa server.

5. SQ Menjelaskan Cara Kerja Keseluruhan

Ketika halaman dibuka, CSS langsung membuat tampilan yang elegan dan rapi. Ketika pengguna mengetik, JavaScript bekerja menyaring nama. Ketika elemen disentuh, transisi CSS memperhalus animasi.

SQ merancangnya agar seluruh pengalaman terasa modern seperti UI aplikasi smartphone.

SQ ingin kamu tahu bahwa contoh ini mudah dikembangkan. Kamu bisa menambahkan nomor telepon, foto profil, kategori huruf, dan lain-lain karena struktur dasarnya sudah kuat.

6. Kesimpulan SQ

Melalui tutorial ini, SQ telah menjelaskan:

Struktur HTML lengkap buatan SQ.

Penjelasan CSS modern dari SQ.

Fungsi JavaScript filter kontak ala SQ.

Alur kerja dan cara mengembangkannya.

SQ berharap kamu bisa memahami tutorial ini dan bisa membuat proyek serupa dengan kreativitasmu sendiri. SQ percaya semakin sering kamu mencoba, semakin cepat kamu memahami setiap detail coding yang SQ jelaskan.

Sekarang, seperti permintaanmu, SQ tampilkan source code asli tanpa perubahan di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Modern Phonebook</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: "Inter", sans-serif;
    }

    body {
      margin: 0;
      padding: 5px;
      display: flex;
      justify-content: center;
      background: #f0f2f5;
    }

    .container {
      width: 100%;
      max-width: 450px;
      background: #ffffff;
      padding: 25px;
      border-radius: 18px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
      animation: fadeIn 0.4s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    h2 {
      margin: 0 0 20px;
      text-align: center;
      font-size: 26px;
      font-weight: 700;
      color: #333;
    }

    #myInput {
      width: 100%;
      padding: 14px 18px;
      padding-left: 45px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fafafa url('https://cdn-icons-png.flaticon.com/512/622/622669.png') no-repeat 12px center;
      background-size: 20px;
      transition: 0.3s;
    }

    #myInput:focus {
      outline: none;
      border-color: #4a90e2;
      background-color: #fff;
      box-shadow: 0 0 0 3px rgba(74,144,226,0.2);
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 20px 0 0;
    }

    ul li a {
      display: block;
      padding: 14px 18px;
      margin-bottom: 10px;
      background: #f7f7f7;
      border-radius: 12px;
      font-size: 17px;
      text-decoration: none;
      color: #333;
      border: 1px solid #e4e4e4;
      transition: 0.25s;
    }

    ul li a:hover {
      background: #e9f2ff;
      border-color: #4a90e2;
      transform: translateX(4px);
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Modern Phonebook</h2>
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

  <ul id="myUL">
    <li><a href="#">Adele</a></li>
    <li><a href="#">Agnes</a></li>
    <li><a href="#">Billy</a></li>
    <li><a href="#">Bob</a></li>
    <li><a href="#">Calvin</a></li>
    <li><a href="#">Christina</a></li>
    <li><a href="#">Cindy</a></li>
  </ul>
</div>

<script>
function myFunction() {
  let input = document.getElementById("myInput");
  let filter = input.value.toUpperCase();
  let ul = document.getElementById("myUL");
  let li = ul.getElementsByTagName("li");

  for (let i = 0; i < li.length; i++) {
    let a = li[i].getElementsByTagName("a")[0];
    let txtValue = a.textContent || a.innerText;
    li[i].style.display = txtValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
  }
}
</script>

</body>
</html>