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

ProjekKad Profilialah 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

   Salin selepas log masuk

2. Buka direktori projek:
   

   cd Profile-Card

   Salin selepas log masuk

3. Jalankan projek:

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

Penggunaan

1. Buka laman webdalam pelayar web.
2. Lihat Kad Profilmemaparkan maklumat pengguna.
3. Berinteraksi dengan kaddengan 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:

        
  
 
Profile Card
 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

Fail style.css menggayakan Kad Profil, memastikan ia menarik secara visual dan responsif. Di bawah adalah 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 adalah 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 += `
 
  
 
${val.name}
 
${val.status}
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia consequatur nobis natus. Provident?
  ${val.status === "Stranger" ? "Add Friend" : "Remove Friend"}  
`; }); 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 merupakan 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!