Erstellen Sie eine Visitenkarten-Website

Einführung

Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: eine Profilkarte. Dieses einfache, aber elegante Projekt ist eine großartige Möglichkeit, Ihre Front-End-Entwicklungsfähigkeiten unter Beweis zu stellen und gleichzeitig eine wiederverwendbare Komponente für den persönlichen oder beruflichen Gebrauch zu erstellen. Egal, ob Sie ein persönliches Portfolio oder eine Unternehmenswebsite erstellen, diese Profilkarte kann Ihren Webseiten eine elegante und professionelle Note verleihen.

Projektübersicht

Das Profile Card-Projekt ist eine webbasierte Komponente, die das Profilbild, den Namen, den Status und eine kurze Beschreibung eines Benutzers anzeigt. Es ist interaktiv konzipiert und ermöglicht Benutzern das Hinzufügen oder Entfernen von Freunden mit nur einem Klick auf eine Schaltfläche. Dieses Projekt zeigt, wie man mit dynamischen Inhalten, Ereignis-Listenern und bedingtem Rendering mithilfe von JavaScript arbeitet.

Merkmale

• Interaktives Design: Benutzer können mit der Profilkarte interagieren, indem sie Freunde hinzufügen oder entfernen.
• Responsives Layout: Die Karte ist so gestaltet, dass sie auf verschiedenen Geräten und Bildschirmgrößen großartig aussieht.
• Dynamischer Inhalt: Die Profilkarte aktualisiert ihren Inhalt dynamisch basierend auf Benutzerinteraktionen.

Verwendete Technologien

• HTML: Stellt die Struktur für die Profilkarte bereit.
• CSS: Gestaltet die Karte und stellt sicher, dass sie optisch ansprechend und reaktionsfähig ist.
• JavaScript: Verwaltet die interaktiven Funktionen, wie z. B. das Aktualisieren des Kartenstatus und das erneute Rendern von Inhalten.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

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

• index.html: Enthält die HTML-Struktur für die Profilkarte.
• style.css: Enthält CSS-Stile für ein klares, modernes Design.
• script.js: Verwaltet die dynamischen Aspekte der Karte, wie Benutzerinteraktionen und Statusaktualisierungen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

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

2. Öffnen Sie das Projektverzeichnis:
   

   cd Profile-Card
   

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um die Profilkarte anzuzeigen.

Verwendung

1. Öffnen Sie die Website in einem Webbrowser.
2. Profilkarte anzeigen mit den Benutzerinformationen.
3. Interagieren Sie mit der Karte, indem Sie auf die Schaltfläche „Freund hinzufügen“ oder „Freund entfernen“ klicken, um den Status des Benutzers zu aktualisieren.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur der Profilkarte, einschließlich Kopfzeile, Hauptinhaltsbereich und Fußzeile. Hier ist ein Ausschnitt:

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

Die style.css-Datei formatiert die Profilkarte und stellt sicher, dass sie optisch ansprechend und reaktionsfähig ist. Nachfolgend sind einige wichtige Stile aufgeführt:

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

Die Datei script.js enthält die Logik zum dynamischen Generieren der Profilkarten und zum Verarbeiten von Benutzerinteraktionen. Hier ist ein Ausschnitt:

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

Live-Demo

Sie können sich hier die Live-Demo des Profile Card-Projekts ansehen.

Abschluss

Das Profilkartenprojekt war eine unterhaltsame Erfahrung, da ich wichtige Frontend-Kenntnisse wie HTML, CSS und JavaScript üben konnte. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, Ihre eigenen interaktiven Komponenten zu erstellen und Ihre Entwicklungsfähigkeiten weiter zu verbessern. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Front-End-Entwicklung entwickelt, mit dem Schwerpunkt auf der Erstellung interaktiver und wiederverwendbarer Webkomponenten.

Autor

• Abhishek Gurjar
  • GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Visitenkarten-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!