Celebrity-Birthday-App selbst programmieren: HTML, CSS & JavaScript Tutorial

Einleitung: Warum eine Celebrity-Birthday-App?

Stell dir vor, du könntest den Geburtstag deines Lieblingssportlers, Musikstars oder Gaming-Streamers nie wieder verpassen. Genau das bietet die Celebrity-Birthday-App von Celebrity News. In diesem Tutorial zeigen wir dir, wie du eine solche App als Studienprojekt (z. B. für Bman11000 coursework 9 p0) selbst entwickeln kannst. Wir nutzen HTML, CSS und JavaScript – ohne Frameworks, damit du die Grundlagen wirklich verstehst. Der Fokus liegt auf den Anforderungen 5 bis 8 der Aufgabenstellung: Implementierung der Kalenderansicht, Favoritenverwaltung und personalisierte Anzeige.

Projektplanung und -struktur

Bevor du Code schreibst, solltest du die App-Struktur planen. Eine typische Celebrity-Birthday-App besteht aus:

Einer öffentlichen Kalenderansicht mit allen Geburtstagen der Partner-Celebrities
Einem Registrierungs- und Login-System für Fans
Der Möglichkeit, Celebrities als Favoriten auszuwählen
Einem personalisierten Kalender, der nur die Favoriten anzeigt

Als aktuelles Beispiel: Im Mai 2026 feiern viele Stars Geburtstag – von Fußballern bis zu TikTok-Influencern. Deine App könnte z. B. einen „Geburtstag des Tages“ hervorheben.

HTML-Grundgerüst der App

Beginne mit einer semantisch korrekten HTML-Struktur. Verwende <header>, <main>, <section> und <footer>. Hier ein Auszug:

<header>
  <h1>Celebrity Birthdays</h1>
  <nav>
    <ul>
      <li><a href="#calendar">Kalender</a></li>
      <li><a href="#favorites">Meine Favoriten</a></li>
    </ul>
  </nav>
</header>

Die Kalenderansicht wird typischerweise als Raster dargestellt. Nutze <table> oder ein div-Grid. Für die Favoritenverwaltung eignet sich ein <ul> mit Checkboxen oder Stern-Icons.

CSS für ein modernes Design

Ein ansprechendes Design ist entscheidend für die Nutzerakzeptanz. Orientiere dich an aktuellen Trends: Dark Mode, Karten-Layouts und sanfte Animationen. Beispiel für eine Celeb-Karte:

.celebrity-card {
  background: #1e1e2f;
  border-radius: 12px;
  padding: 1rem;
  color: white;
  transition: transform 0.2s;
}
.celebrity-card:hover {
  transform: scale(1.02);
}

Füge Medienabfragen hinzu, damit die App auf Smartphones gut aussieht – schließlich wird sie hauptsächlich mobil genutzt.

JavaScript: Datenverwaltung und Interaktivität

Der Kern der App ist JavaScript. Du benötigst:

Ein Array mit Celeb-Objekten (Name, Geburtsdatum, Kategorie, Bild-URL)
Funktionen zum Filtern nach Monat oder Tag
Lokale Speicherung der Favoriten (localStorage)

Beispiel für ein Celeb-Objekt:

const celebrities = [
  {
    id: 1,
    name: "Taylor Swift",
    birthDate: "1989-12-13",
    category: "Musik",
    image: "taylor.jpg"
  },
  // ... weitere
];

Um die Favoriten zu speichern, nutze localStorage.setItem('favorites', JSON.stringify(favArray)). Beim Laden der App prüfst du, ob bereits Favoriten existieren und zeigst sie an.

Anforderung 5: Öffentlicher Geburtstagskalender

Der Kalender für die allgemeine Öffentlichkeit zeigt alle Geburtstage chronologisch an. Implementiere eine Monatsansicht: Jeder Monat hat eine Liste der Celebrities, die in diesem Monat Geburtstag haben. Nutze die Date-Objekte, um den aktuellen Monat zu ermitteln. Beispiel:

function getBirthdaysThisMonth(month, year) {
  return celebrities.filter(c => {
    const d = new Date(c.birthDate);
    return d.getMonth() === month && d.getFullYear() === year;
  });
}

Ergänze Navigationselemente (Pfeile) zum Wechseln zwischen Monaten.

Anforderung 6: Fan-Registrierung und Login

Fans müssen sich registrieren können. Simuliere dies mit localStorage: Speichere Benutzername und Passwort (nur für Lernzwecke – niemals so in Produktion!). Ein einfaches Formular reicht:

<form id="registerForm">
  <input type="text" placeholder="Benutzername" required>
  <input type="password" placeholder="Passwort" required>
  <button>Registrieren</button>
</form>

Nach der Registrierung wird der Benutzer automatisch eingeloggt. Zeige dann die personalisierte Ansicht.

Anforderung 7: Favoritenauswahl und personalisierte Ansicht

Eingeloggte Fans können Celebrities als Favoriten markieren. Implementiere dies mit einem „Stern“-Button auf jeder Celeb-Karte. Beim Klick wird die ID in das Favoriten-Array gespeichert. Die personalisierte Kalenderansicht filtert dann nur die Favoriten:

function getFavoriteBirthdays() {
  const favIds = JSON.parse(localStorage.getItem('favorites')) || [];
  return celebrities.filter(c => favIds.includes(c.id));
}

Zeige diese Liste in einem separaten Bereich an, z. B. unter „Meine Favoriten“.

Anforderung 8: Implementierungsqualität und Best Practices

Die Qualität deiner Implementierung zählt. Beachte:

Kommentiere deinen Code (besonders komplexe Funktionen)
Verwende konsistente Namenskonventionen (camelCase für Variablen)
Vermeide globale Variablen – kapsle Code in Funktionen oder Module
Teste auf verschiedenen Browsern und Geräten

Ein Beispiel für sauberen Code:

// Initialisiert die App
function initApp() {
  loadCelebrities();
  renderCurrentMonth();
  if (isLoggedIn()) {
    showFavorites();
  }
}
document.addEventListener('DOMContentLoaded', initApp);

Trendbeispiel: Gaming-Streamer-Geburtstage

Um die App interessanter zu machen, integriere aktuelle Beispiele: Im Mai 2026 feiern bekannte Gaming-Streamer wie „Ninja“ oder „Pokimane“ Geburtstag. Du könntest eine Kategorie „Gaming“ hinzufügen und deren Geburtstage prominent anzeigen. Das macht die App für die junge Zielgruppe relevanter.

Erweiterungsmöglichkeiten

Wenn du die App erweitern möchtest, denke an:

Benachrichtigungen (z. B. Browser-Notification am Geburtstag)
Filter nach Kategorie (Sport, Musik, Film, Internet)
Social-Media-Integration (Teilen von Geburtstagen)

Diese Features heben dein Projekt von anderen ab und zeigen dein Verständnis für moderne Webentwicklung.

Fazit

Mit diesem Leitfaden hast du eine solide Grundlage für deine Celebrity-Birthday-App. Denke daran: Die Implementierungsqualität ist entscheidend für die Bewertung. Arbeite sauber, teste gründlich und dokumentiere deinen Code. Viel Erfolg bei deinem Projekt!

„Eine App zu entwickeln, die Menschen mit ihren Idolen verbindet, ist mehr als nur Code – es ist eine Brücke zwischen Fans und Stars.“