Bina Laman Web Kad Profil

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: Kad Profil. Projek yang ringkas namun elegan ini ialah cara terbaik untuk mempamerkan kemahiran pembangunan bahagian hadapan anda sambil mencipta komponen boleh guna semula untuk kegunaan peribadi atau profesional. Sama ada anda sedang membina portfolio peribadi atau tapak web perniagaan, Kad Profil ini boleh menambah sentuhan yang digilap dan profesional pada halaman web anda.

Gambaran Keseluruhan Projek

Projek Kad Profil ialah komponen berasaskan web yang memaparkan gambar profil, nama, status dan penerangan ringkas pengguna. Ia direka bentuk untuk menjadi interaktif, membolehkan pengguna menambah atau mengalih keluar rakan hanya dengan satu klik butang. Projek ini menunjukkan cara bekerja dengan kandungan dinamik, pendengar acara dan pemaparan bersyarat menggunakan JavaScript.

Ciri-ciri

• Reka Bentuk Interaktif: Pengguna boleh berinteraksi dengan kad profil dengan menambah atau mengalih keluar rakan.
• Reka Letak Responsif: Kad direka bentuk untuk kelihatan hebat pada pelbagai peranti dan saiz skrin.
• Kandungan Dinamik: Kad profil mengemas kini kandungannya secara dinamik berdasarkan interaksi pengguna.

Teknologi yang Digunakan

• HTML: Menyediakan struktur untuk kad profil.
• CSS: Menggayakan kad, memastikan ia menarik secara visual dan responsif.
• JavaScript: Mengendalikan ciri interaktif, seperti mengemas kini status kad dan memaparkan semula kandungan.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Profile-Card/
├── index.html
├── style.css
└── script.js

• index.html: Mengandungi struktur HTML untuk Kad Profil.
• style.css: Termasuk gaya CSS untuk reka bentuk yang bersih dan moden.
• script.js: Menguruskan aspek dinamik kad, seperti interaksi pengguna dan kemas kini status.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

   git clone https://github.com/abhishekgurjar-in/Profile-Card.git
   

2. Buka direktori projek:
   

   cd Profile-Card
   

3. Jalankan projek:

   • Buka fail index.html dalam penyemak imbas web untuk melihat Kad Profil.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Lihat Kad Profil memaparkan maklumat pengguna.
3. Berinteraksi dengan kad dengan mengklik butang "Tambah Rakan" atau "Alih Keluar Rakan" untuk mengemas kini status pengguna.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Kad Profil, termasuk pengepala, kawasan kandungan utama dan pengaki. Berikut adalah coretan:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Profile Card6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    924ff17625d603f964501dd897c96cc6
      4a249f0d628e2318394fd9b75b4636b1Profile Card473f0a7621bec819994bb5020d29372a
    16b28748ea4df4d9c2150843fecfba68
    243a8f3f087936dc3f96e2f0cf018c2216b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

Fail style.css menggayakan Kad Profil, memastikan ia menarik secara visual dan responsif. Di bawah ialah beberapa gaya utama:

body {
  width: 100%;
  height: 100%;
}

.header {
  font-family: sans-serif;
  margin: 50px;
  text-align: center;
}

#main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 65vh;
}

#card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  width: 200px;
  height: 300px;
  background-color: #ffffff;
}

#card #img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
  overflow: hidden;
}

#card button {
  padding: 12px 22px;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.footer {
  margin: 50px;
  text-align: center;
}

JavaScript

Fail script.js mengandungi logik untuk menjana Kad Profil secara dinamik dan mengendalikan interaksi pengguna. Berikut ialah coretan:

var arr = [
  {
    name: "Alexander",
    img: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    status: "Stranger",
  },
  {
    name: "Alex",
    img: "https://images.unsplash.com/photo-1549780101-0c96c7eafbd9?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    status: "Stranger",
  },
];

function print() {
  var clutter = "";
  arr.forEach(function (val, index) {
    clutter += `2e0f9246e0efb13426a82c7a66cb8ecf
      da8f770b4b20bddacfe2892cf09d4dc4
        450cc9548020fb25015b4152370eff19
      16b28748ea4df4d9c2150843fecfba68
      684271ed9684bde649abda8831d4d355${val.name}39528cedfa926ea0c01e69ef5b2ea9b0
      c709bbc0c4dc83e77d44381701e7cbb2${val.status}46eb22d0a433f22cff9940d34d5612bf
      e388a4556c0f65e1904146cc1a846beeLorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia consequatur nobis natus. Provident?94b3e26ee717c64999d7867364b1b4a3
      a6f426b398845cafcd9b34afd8ec64a6
        ${val.status === "Stranger" ? "Add Friend" : "Remove Friend"}
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68`;
  });
  document.querySelector("#main").innerHTML = clutter;
}
print();

document.querySelector("#main").addEventListener("click", function (details) {
  arr[details.target.id].status = "Friends";
  print();
});

Demo Langsung

Anda boleh melihat demo langsung projek Kad Profil di sini.

Kesimpulan

Projek Kad Profil adalah pengalaman yang menyeronokkan, membolehkan saya mempraktikkan kemahiran bahagian hadapan yang penting seperti HTML, CSS dan JavaScript. Saya harap projek ini memberi inspirasi kepada anda untuk mencipta komponen interaktif anda sendiri dan terus mengasah kemahiran pembangunan anda. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan bahagian hadapan, dengan tumpuan untuk mencipta komponen web yang interaktif dan boleh digunakan semula.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Kad Profil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!