Das Erstellen einer Abstimmungsanwendung

Einführung

In diesem Projekt lernst du, wie du eine Abstimmungsanwendung erstellen kannst, mit der Benutzer Abstimmungsmöglichkeiten erstellen und verwalten können und diese gegebenenfalls auch löschen können. Die Anwendung umfasst auch Funktionen für die Mehrfachauswahl und die Veröffentlichung der Abstimmungsergebnisse.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die HTML-Struktur für die Abstimmungsanwendung initialisieren
• Wie du die Funktionalität implementierst, um neue Abstimmungsmöglichkeiten hinzuzufügen
• Wie du die Funktionalität implementierst, um Abstimmungsmöglichkeiten zu löschen
• Wie du die Anwendung testest, um sicherzustellen, dass die Funktionalität wie erwartet funktioniert

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Die grundlegende HTML-Struktur für eine Abstimmungsanwendung einzurichten
• JavaScript verwenden, um Abstimmungsmöglichkeiten dynamisch hinzuzufügen und zu entfernen
• Benutzerinteraktionen zu verarbeiten, wie zum Beispiel das Klicken auf die Schaltfläche "Option hinzufügen" und das Löschen-Symbol
• Die Anwendung zu testen, um sicherzustellen, dass sie die Anforderungen erfüllt
• Interaktive Webanwendungen mit HTML, CSS und JavaScript zu erstellen

Skills Graph

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── css
|   ├── style.css
|   └── bootstrap.min.css
├── images
|   ├── x.svg
|   └── plus-square.svg
├── js
│   └── jquery.min.js
└── index.html

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Implementiere die Funktionalität zum Hinzufügen von Optionen

In diesem Schritt wirst du die Funktionalität implementieren, um neue Abstimmungsmöglichkeiten zur Anwendung hinzuzufügen.

1. Öffne in der Datei index.html den <script>-Abschnitt am Ende der Datei.
2. Innerhalb des <script>-Abschnitts musst du zunächst itemNumber und renderList hinzufügen, und der hinzugefügte Code sieht so aus:

let itemNumber = 2; // Standardmäßig 2 Daten
let initRender = (txt) => {
  return `<div class="mb-3 row">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
         </div>
      </div>`;
};
// Rendere HTML mit x (Löschbutton) für Daten größer
let renderList = (txt) => {
  return `<div class="mb-3 row item">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
          </div>
          <div class="col-sm-1">
              <img class="del-icon" src="./images/x.svg" alt="">
          </div>
      </div> `;
};

Diese Funktionen werden verwendet, um die HTML-Struktur für die Abstimmungsmöglichkeiten zu generieren.

3. Stelle im <script>-Abschnitt den folgenden Codeblock fest:

$(
  (function () {
    // Beim Initialisieren erscheinen die folgenden zwei Daten ohne das Löschsymbol
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // Klicke auf das Pluszeichen
    $(".add").click(function () {
      // TODO: Vollende den Code hier
    });
  })()
);

4. Innerhalb des Blocks $(".add").click(function () {... }) füge den folgenden Code hinzu:

$(".list").html("");
itemNumber++;
for (let index = 0; index < itemNumber; index++) {
  let list = renderList(`Option${index + 1}`);
  $(".list").append(list);
}

Dieser Code löscht die vorhandenen Optionen, erhöht die Variable itemNumber und rendert dann die neuen Optionen mit der renderList-Funktion.

Mit diesem Code wird, wenn der Benutzer auf die Schaltfläche "Option hinzufügen" klickt, eine neue Abstimmungsmöglichkeit zur Liste hinzugefügt.

Implementiere die Löschfunktionalität

In diesem Schritt wirst du die Funktionalität implementieren, um Abstimmungsmöglichkeiten aus der Anwendung zu löschen.

1. Im <script>-Abschnitt der Datei index.html finde den folgenden Codeblock:

// Klicke auf die x-Löschschaltfläche, das Löschsymbol wird nicht angezeigt, wenn die Liste weniger als 2 Elemente enthält
$(document).on("click", ".del-icon", function () {
  // TODO: Vollende den Code hier
});

2. Füge innerhalb dieses Codeblocks folgenden Code hinzu:

$(".list").html("");
itemNumber--;
if (itemNumber <= 2) {
  for (let index = 0; index < itemNumber; index++) {
    let list = initRender(`Option${index + 1}`);
    $(".list").append(list);
  }
} else {
  for (let index = 0; index < itemNumber; index++) {
    let list = renderList(`Option${index + 1}`);
    $(".list").append(list);
  }
}

Dieser Code löscht die vorhandenen Optionen, verringert die Variable itemNumber und rendert dann die verbleibenden Optionen mit der entsprechenden Funktion (initRender oder renderList), abhängig von der Anzahl der Optionen.

Mit diesem Code wird, wenn der Benutzer auf das "x"-Symbol neben einer Abstimmungsmöglichkeit klickt, diese Option aus der Liste entfernt.

Teste die Anwendung

1. Speichere die Datei index.html und aktualisiere die index.html-Seite in deinem Browser.
2. Vergewissere dich, dass die ersten beiden Abstimmungsmöglichkeiten ohne das Löschsymbol angezeigt werden.
3. Klicke auf die Schaltfläche "Option hinzufügen" und beobachte, dass eine neue Abstimmungsmöglichkeit zur Liste hinzugefügt wird, mit dem Löschsymbol angezeigt.
4. Klicke auf das Löschsymbol neben einer der Abstimmungsmöglichkeiten und vergewissere dich, dass die Option aus der Liste entfernt wird.
5. Führe die Tests der Anwendung fort, indem du Abstimmungsmöglichkeiten hinzufügst und löschest, um sicherzustellen, dass die Funktionalität wie erwartet funktioniert.

Das fertige Ergebnis ist wie folgt:

Herzlichen Glückwunsch! Du hast die Implementierung der Abstimmungsanwendung abgeschlossen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.