프로필 카드 웹사이트 구축-JS 튜토리얼-php.cn

프로필 카드 웹사이트 구축

王林

풀어 주다： 2024-08-24 11:21:35

원래의

550명이 탐색했습니다.

Build a Profile Card Website

소개

안녕하세요, 개발자 여러분! 저의 최근 프로젝트인 프로필 카드를 공유하게 되어 기쁩니다. 이 간단하면서도 우아한 프로젝트는 개인용 또는 전문용으로 재사용 가능한 구성 요소를 만드는 동시에 프런트 엔드 개발 기술을 선보일 수 있는 좋은 방법입니다. 개인 포트폴리오를 구축하든 비즈니스 웹사이트를 구축하든 이 프로필 카드를 사용하면 웹페이지에 세련되고 전문적인 느낌을 더할 수 있습니다.

프로젝트 개요

프로필 카드 프로젝트는 사용자의 프로필 사진, 이름, 상태, 간단한 설명을 표시하는 웹 기반 구성 요소입니다. 대화형으로 설계되어 사용자가 단 한 번의 버튼 클릭만으로 친구를 추가하거나 제거할 수 있습니다. 이 프로젝트는 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 파일을 열어 프로필 카드를 확인하세요.

용법

웹사이트를 엽니다 웹 브라우저에서
프로필 카드 보기 사용자 정보를 표시합니다.
카드와 상호작용 "친구 추가" 또는 "친구 제거" 버튼을 클릭하여 사용자 상태를 업데이트하세요.

코드 설명

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

로그인 후 복사

자바스크립트

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

로그인 후 복사