Bina Laman Web Kad Profil-tutorial js-php.cn

Bina Laman Web Kad Profil

王林

Lepaskan： 2024-08-24 11:21:35

asal

537 orang telah melayarinya

Build a Profile Card Website

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

Salin selepas log masuk

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:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Profile-Card
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk melihat Kad Profil.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Lihat Kad Profil memaparkan maklumat pengguna.
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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Profile Card</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1>Profile Card</h1>
    </div>
    <div id="main"></div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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 += `<div id="card">
      <div id="img">
        <img src="${val.img}">
      </div>
      <h3>${val.name}</h3>
      <h5 id="${val.status}">${val.status}</h5>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia consequatur nobis natus. Provident?</p>
      <button class="${val.status === "Stranger" ? "blue" : "red"}" id="${index}">
        ${val.status === "Stranger" ? "Add Friend" : "Remove Friend"}
      </button>
    </div>`;
  });
  document.querySelector("#main").innerHTML = clutter;
}
print();

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

Salin selepas log masuk

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.