Erstellen Sie eine Visitenkarten-Website-js-Tutorial-php.cn

Erstellen Sie eine Visitenkarten-Website

王林

Freigeben： 2024-08-24 11:21:35

Original

577 Leute haben es durchsucht

Build a Profile Card 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

Nach dem Login kopieren

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:

Klonen Sie das Repository:

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

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Profile-Card
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um die Profilkarte anzuzeigen.

Verwendung

Öffnen Sie die Website in einem Webbrowser.
Profilkarte anzeigen mit den Benutzerinformationen.
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:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!