建立個人資料卡網站

介紹

開發者們大家好！我很高興分享我的最新項目：個人資料卡。這個簡單而優雅的專案是展示您的前端開發技能同時創建供個人或專業使用的可重複使用元件的好方法。無論您是要建立個人作品集還是商業網站，此個人資料卡都可以為您的網頁增添精美和專業的風格。

項目概況

個人資料卡項目是一個基於Web的元件，用於顯示使用者的個人資料圖片、姓名、狀態和簡短描述。它被設計為互動的，允許用戶只需單擊按鈕即可添加或刪除朋友。此專案示範如何使用 JavaScript 處理動態內容、事件偵聽器和條件渲染。

特徵

• 互動設計：使用者可以透過新增或刪除好友來與個人資料卡互動。
• 響應式佈局：這張卡片的設計在各種設備和螢幕尺寸上看起來都很棒。
• 動態內容：個人資料卡根據使用者互動動態更新其內容。

使用的技術

• HTML：提供個人資料卡的結構。
• CSS：設定卡片的樣式，確保其具有視覺吸引力和反應能力。
• JavaScript：處理互動功能，例如更新卡片的狀態和重新渲染內容。

專案結構

以下是項目結構的概述：

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

• index.html：包含個人資料卡的 HTML 結構。
• style.css：包含 CSS 樣式，實現乾淨、現代的設計。
• script.js：管理卡片的動態方面，例如使用者互動和狀態更新。

安裝

要開始該項目，請按照以下步驟操作：

1. 複製儲存庫：
   

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

2. 開啟專案目錄:
   

   cd Profile-Card
   

3. 運行項目:

   • 在網頁瀏覽器中開啟index.html 檔案以查看個人資料卡。

用法

1. 在網頁瀏覽器中開啟網站。
2. 查看個人資料卡顯示使用者的資訊。
3. 與卡片互動點擊「新增好友」或「刪除好友」按鈕來更新使用者的狀態。

程式碼說明

超文本標記語言

index.html 檔案定義了個人資料卡的結構，包括頁首、主要內容區域和頁腳。這是一個片段：

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

style.css 檔案設定個人資料卡的樣式，確保其具有視覺吸引力和回應能力。以下是一些關鍵樣式：

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

script.js 檔案包含動態產生個人資料卡和處理使用者互動的邏輯。這是一個片段：

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

現場演示

您可以在此處查看個人資料卡專案的現場演示。

結論

個人資料卡專案是一次愉快的經歷，它讓我練習了基本的前端技能，例如 HTML、CSS 和 JavaScript。我希望這個專案能夠激勵您創建自己的互動式元件並繼續磨練您的開發技能。快樂編碼！

製作人員

這個專案是我在前端開發方面持續學習之旅的一部分，重點是創建互動式和可重複使用的 Web 元件。

作者

• 阿布舍克·古賈爾
  • GitHub 簡介

以上是建立個人資料卡網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！