Créer un site Web de carte de profil

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : une Carte de profil. Ce projet simple mais élégant est un excellent moyen de mettre en valeur vos compétences en développement front-end tout en créant un composant réutilisable pour un usage personnel ou professionnel. Que vous construisiez un portfolio personnel ou un site Web professionnel, cette carte de profil peut ajouter une touche raffinée et professionnelle à vos pages Web.

Aperçu du projet

Le projet Profile Card est un composant Web qui affiche la photo de profil, le nom, le statut et une brève description d'un utilisateur. Il est conçu pour être interactif, permettant aux utilisateurs d'ajouter ou de supprimer des amis d'un simple clic sur un bouton. Ce projet montre comment travailler avec du contenu dynamique, des écouteurs d'événements et un rendu conditionnel à l'aide de JavaScript.

Caractéristiques

• Conception interactive : les utilisateurs peuvent interagir avec la carte de profil en ajoutant ou en supprimant des amis.
• Mise en page réactive : la carte est conçue pour s'adapter à différents appareils et tailles d'écran.
• Contenu dynamique : la carte de profil met à jour dynamiquement son contenu en fonction des interactions de l'utilisateur.

Technologies utilisées

• HTML : Fournit la structure de la carte de profil.
• CSS : stylise la carte, en s'assurant qu'elle est visuellement attrayante et réactive.
• JavaScript : gère les fonctionnalités interactives, telles que la mise à jour de l'état de la carte et le rendu du contenu.

Structure du projet

Voici un aperçu de la structure du projet :

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

• index.html : Contient la structure HTML de la carte de profil.
• style.css : inclut des styles CSS pour un design épuré et moderne.
• script.js : gère les aspects dynamiques de la carte, tels que les interactions des utilisateurs et les mises à jour de statut.

Installation

Pour démarrer le projet, suivez ces étapes :

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Profile-Card
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour afficher la carte de profil.

Usage

1. Ouvrez le site Web dans un navigateur Web.
2. Afficher la carte de profil affichant les informations de l'utilisateur.
3. Interagissez avec la carte en cliquant sur le bouton « Ajouter un ami » ou « Supprimer un ami » pour mettre à jour le statut de l'utilisateur.

Explication du code

HTML

Le fichier index.html définit la structure de la carte de profil, y compris l'en-tête, la zone de contenu principale et le pied de page. En voici un extrait :

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

Le fichier style.css stylise la carte de profil, garantissant qu'elle est visuellement attrayante et réactive. Voici quelques styles clés :

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

Le fichier script.js contient la logique permettant de générer dynamiquement les cartes de profil et de gérer les interactions des utilisateurs. En voici un extrait :

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

Démo en direct

Vous pouvez consulter la démo en direct du projet Profile Card ici.

Conclusion

Le projet Profile Card a été une expérience agréable, me permettant de mettre en pratique des compétences frontales essentielles telles que HTML, CSS et JavaScript. J'espère que ce projet vous incitera à créer vos propres composants interactifs et à continuer à perfectionner vos compétences en développement. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours d'apprentissage continu en développement front-end, en mettant l'accent sur la création de composants Web interactifs et réutilisables.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!