ホームページ >ウェブフロントエンド >jsチュートリアル >プロファイルカード Web サイトを構築する

プロファイルカード Web サイトを構築する

王林オリジナル: 2024-08-24 11:21:35559ブラウズ

Build a Profile Card Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるプロフィールカードを共有できることを嬉しく思います。このシンプルかつエレガントなプロジェクトは、個人用または業務用に再利用可能なコンポーネントを作成しながら、フロントエンド開発スキルを披露するのに最適な方法です。個人のポートフォリオを構築している場合でも、ビジネス Web サイトを構築している場合でも、このプロファイルカードを使用すると、Web ページに洗練されたプロフェッショナルな雰囲気を加えることができます。

プロジェクト概要

プロファイルカード プロジェクトは、ユーザーのプロフィール写真、名前、ステータス、および簡単な説明を表示する 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
```
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、プロファイルカードを表示します。

使用法

Web ブラウザで Web サイトを開きます。
プロフィールカードを表示します。ユーザーの情報が表示されます。
「友達を追加」または「友達を削除」ボタンをクリックしてカードを操作し、ユーザーのステータスを更新します。

コードの説明

HTML

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 プロフィール

以上がプロファイルカード Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html for while Directory continue using Conditional Event JS this github

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：for-of ループ次の記事：for-of ループ

続きを見る

プロファイル カード Web サイトを構築する

導入