Créer un site Web de carte de profil-js tutoriel-php.cn

Créer un site Web de carte de profil

王林

Libérer： 2024-08-24 11:21:35

original

555 Les gens l'ont consulté

Build a Profile Card Website

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

Copier après la connexion

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 :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Profile-Card
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher la carte de profil.

Usage

Ouvrez le site Web dans un navigateur Web.
Afficher la carte de profil affichant les informations de l'utilisateur.
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 :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!