Album Creator in JavaScript: Schritt-für-Schritt-Tutorial für CPSC 1520

Einleitung: Was ist der Album Creator?

Der Album Creator ist eine klassische Webanwendung, die dir zeigt, wie du mit JavaScript Formulare validierst, dynamisch HTML erzeugst und Benutzerinteraktionen steuerst. In diesem Tutorial lernst du Schritt für Schritt, wie du eine solche App baust – genau wie im CPSC 1520 Assignment 1 gefordert.

Warum ist Formularvalidierung wichtig?

Stell dir vor, du erstellst eine Playlist auf Spotify oder ein Album in einer Musik-App. Ohne Validierung könnten leere Titel oder zu lange Beschreibungen die App zum Absturz bringen. Genau das verhindert der Album Creator mit intelligenten Prüfungen.

Die Validierungsregeln im Überblick

• Albumtitel: Darf nicht leer sein und maximal 60 Zeichen lang sein.
• Beschreibung: Darf nicht leer sein und maximal 255 Zeichen lang sein.
• Cover-Bild: Muss ein GIF sein und darf nicht leer sein.

Event-Listener und Formular-Submit

Der erste Schritt ist ein Event-Listener, der auf das submit-Ereignis des Formulars lauscht. Mit event.preventDefault() verhinderst du, dass die Seite neu lädt. Dann holst du die Werte aus den Formularfeldern mit event.target.elements.

document.getElementById('albumForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const title = event.target.elements['albumTitle'].value;
  const description = event.target.elements['albumDescription'].value;
  const art = event.target.elements['albumArt'].value;
  // ... Validierung und Album-Erstellung
});

Validierungsfunktionen schreiben

Jede Eingabe bekommt eine eigene Validierungsfunktion. Diese Funktionen geben true oder false zurück und fügen bei Fehlern die Klasse is-invalid hinzu.

Albumtitel validieren

function validateTitle(titleInput) {
  const title = titleInput.value.trim();
  if (title === '' || title.length > 60) {
    titleInput.classList.add('is-invalid');
    return false;
  } else {
    titleInput.classList.remove('is-invalid');
    return true;
  }
}

Beschreibung validieren

function validateDescription(descInput) {
  const desc = descInput.value.trim();
  if (desc === '' || desc.length > 255) {
    descInput.classList.add('is-invalid');
    return false;
  } else {
    descInput.classList.remove('is-invalid');
    return true;
  }
}

Album-Cover validieren

function validateArt(artInput) {
  const art = artInput.value.trim();
  if (art === '' || !art.endsWith('.gif')) {
    artInput.classList.add('is-invalid');
    return false;
  } else {
    artInput.classList.remove('is-invalid');
    return true;
  }
}

Gesamtvalidierung: Alles in einer Funktion

Eine übergeordnete Funktion ruft alle drei Validierungsfunktionen auf und gibt true zurück, wenn alle gültig sind.

function validateForm(titleInput, descInput, artInput) {
  const isTitleValid = validateTitle(titleInput);
  const isDescValid = validateDescription(descInput);
  const isArtValid = validateArt(artInput);
  return isTitleValid && isDescValid && isArtValid;
}

Album-Karte dynamisch erstellen

Wenn die Validierung erfolgreich ist, erzeugst du mit Template Strings ein HTML-Element für die Album-Karte und fügst es am Anfang der Liste ein.

function addAlbumCard(title, description, art) {
  const card = `
    <div class="album-card">
      <img src="${art}" alt="${title}">
      <h3>${title}</h3>
      <p>${description}</p>
    </div>
  `;
  const container = document.getElementById('albumContainer');
  container.insertAdjacentHTML('afterbegin', card);
}

Bonus: Live-Validierung bei Eingabe

Für die Bonus-Punkte kannst du zusätzlich auf input- und change-Ereignisse lauschen, um sofort zu validieren.

document.querySelectorAll('#albumForm input, #albumForm select').forEach(el => {
  el.addEventListener('input', function() {
    validateForm(
      document.getElementById('albumTitle'),
      document.getElementById('albumDescription'),
      document.getElementById('albumArt')
    );
  });
});

Häufige Fehler vermeiden

• Vergiss nicht, das Formular nach erfolgreichem Hinzufügen zurückzusetzen: event.target.reset().
• Setze den Fokus auf das Titel-Feld: document.getElementById('albumTitle').focus().
• Achte darauf, dass der Pfad zum Cover-Bild relativ ist, z.B. images/cover.gif.

Fazit

Mit diesem Tutorial hast du alle Werkzeuge, um den Album Creator für dein CPSC 1520 Assignment zu meistern. Übe die Validierungslogik und das dynamische Erstellen von HTML – das sind Kernkompetenzen für jeden Webentwickler. Viel Erfolg!