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.
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.
Berikut ialah gambaran keseluruhan struktur projek:
Profile-Card/ ├── index.html ├── style.css └── script.js
Untuk memulakan projek, ikut langkah berikut:
Klon repositori:
git clone https://github.com/abhishekgurjar-in/Profile-Card.git
Buka direktori projek:
cd Profile-Card
Jalankan projek:
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>
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; }
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(); });
Anda boleh melihat demo langsung projek Kad Profil di sini.
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!
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.
Atas ialah kandungan terperinci Bina Laman Web Kad Profil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!