Übung 4: Button Countdown mit Settings

Entwickle einen funktionalen Button, der nach einem Klick einen Countdown in der Schaltfläche anzeigt und nach Ablauf des Countdowns automatisch wieder aktiviert wird.

Szenario

Du arbeitest als Frontend-Entwickler für ein Unternehmen, das Online-Formulare für Messeaufträge anbietet. Um sicherzustellen, dass Benutzer die Formulare nicht versehentlich oder mehrfach absenden, soll ein Button implementiert werden, der nach dem Absenden für eine bestimmte Zeit (z.B. 5 Sekunden) deaktiviert wird. Während dieser Zeit soll ein Countdown in der Schaltfläche angezeigt werden, der die verbleibende Zeit bis zur Reaktivierung des Buttons anzeigt.

Aufgaben

1. HTML-Struktur: Erstelle einen einfachen HTML-Button mit einer Klasse (z.B. button-send).
2. JavaScript-Funktionalität:
   • Implementiere einen Event-Listener für den Klick auf den Button.
   • Erstelle eine Countdown-Funktion, die beim Klicken auf den Button gestartet wird.
   • Während des Countdowns soll der Button deaktiviert und der aktuelle Countdown-Wert in der Schaltfläche angezeigt werden.
   • Nach Ablauf des Countdowns soll der Button wieder aktiviert und der ursprüngliche Text in der Schaltfläche wiederhergestellt werden.
3. Countdown-Anzeige: Der Countdown soll in der Schaltfläche des Buttons angezeigt werden. Das Format der Anzeige (z.B. "5...", "4...", "3...") kannst du selbst wählen.
4. Deaktivierung: Stelle sicher, dass der Button während des Countdowns deaktiviert ist, um Mehrfachklicks zu verhindern.
5. Reaktivierung: Sobald der Countdown abgelaufen ist, soll der Button automatisch wieder aktiviert werden.
6. Countdown-Wert konfigurierbar machen: Ermögliche es, den Countdown-Wert (z.B. 5 Sekunden) über ein Settings-Objekt einzustellen. aktiviert werden.

Viel Erfolg bei der Umsetzung!