建立个人资料卡网站-js教程-PHP中文网

建立个人资料卡网站

王林

发布： 2024-08-24 11:21:35

原创

563 人浏览过

Build a Profile Card Website

介绍

开发者们大家好！我很高兴分享我的最新项目：个人资料卡。这个简单而优雅的项目是展示您的前端开发技能同时创建供个人或专业使用的可重用组件的好方法。无论您是要构建个人作品集还是商业网站，此个人资料卡都可以为您的网页增添精美和专业的风格。

项目概况

个人资料卡项目是一个基于Web的组件，用于显示用户的个人资料图片、姓名、状态和简短描述。它被设计为交互式的，允许用户只需单击按钮即可添加或删除朋友。该项目演示了如何使用 JavaScript 处理动态内容、事件侦听器和条件渲染。

特征

互动设计：用户可以通过添加或删除好友来与个人资料卡互动。
响应式布局：该卡片的设计在各种设备和屏幕尺寸上看起来都很棒。
动态内容：个人资料卡根据用户交互动态更新其内容。

使用的技术

HTML：提供个人资料卡的结构。
CSS：设置卡片的样式，确保其具有视觉吸引力和响应能力。
JavaScript：处理交互功能，例如更新卡片的状态和重新渲染内容。

项目结构

以下是项目结构的概述：

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

登录后复制

index.html：包含个人资料卡的 HTML 结构。
style.css：包含 CSS 样式，实现干净、现代的设计。
script.js：管理卡片的动态方面，例如用户交互和状态更新。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

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

登录后复制

打开项目目录:
```
cd Profile-Card
```
登录后复制
运行项目:
- 在网络浏览器中打开index.html 文件以查看个人资料卡。

用法

在网络浏览器中打开网站。
查看个人资料卡显示用户的信息。
与卡片互动通过点击“添加好友”或“删除好友”按钮来更新用户的状态。

代码说明

超文本标记语言

index.html 文件定义了个人资料卡的结构，包括页眉、主要内容区域和页脚。这是一个片段：

<!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>

登录后复制

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

登录后复制