SmartCountdown - FirstDevKit

SmartCountdown Dokumentation

Problemstellung

Countdowns mit Stil und Präzision.

Viele Countdown-Plugins bieten grundlegende Funktionen, doch sie scheitern oft an Flexibilität bei Animationen, Anpassungen und optischer Eleganz. SmartCountdown überzeugt durch anpassbare Animationen, präzises Skalieren und Unterstützung für verschiedene Stile, sodass sich der Countdown nahtlos in das Design deiner Webseite einfügt.

Verwendung (Usage)

So verwendest du SmartCountdown:

Binde die CSS- und JS-Dateien in dein Projekt ein:

<link rel="stylesheet" href="SmartCountdown/css/style.css">
<script src="SmartCountdown/js/main.js"></script>

Füge einen Container in dein HTML ein, in dem der Countdown angezeigt werden soll:
```
<div id="smart-countdown-container"></div>
```

Rufe die SmartCountdown-Funktion in deinem JavaScript auf:

const days = 7, hours = 0, minutes = 0, seconds = 3;

SmartCountdown("#smart-countdown-container", 
    new Date(new Date().getTime() + days * 86400000 + hours * 3600000 + minutes * 60000 + seconds * 1000), 
    {
        delimiter: ":",       // Trennzeichen zwischen den Zeiteinheiten (z. B. ":").
        animation: 'rad',     // Animationsstil ("rad" oder "flip").
        color: "#fff",        // Textfarbe der Ziffern.
        background: "#000",   // Hintergrundfarbe der Ziffern.
        onComplete: () => {   // Callback-Funktion, die ausgeführt wird, wenn der Countdown null erreicht.
            alert("Countdown erreicht null!");
        }
    }
);

Anpassungsmöglichkeiten:
- delimiter: Ändere das Trennzeichen zwischen den Zeiteinheiten, z. B. : oder -.
- animation: Wähle zwischen "rad" für Radial-Animation oder "flip" für drehende Ziffern.
- color: Setze die Textfarbe der Ziffern.
- background: Setze die Hintergrundfarbe der Ziffern.
- onComplete: Definiere eine Funktion, die ausgeführt wird, wenn der Countdown endet.

Verzeichnisstruktur

Dein Projekt könnte so aufgebaut sein:

SmartCountdown/
│
├── css/
│   └── style.css          # Enthält die Stile für die Countdown-Animationen und das Layout
│
├── js/
│   └── main.js            # Enthält die Logik zum Rendern des Countdowns
│
└── README.md              # Dokumentation

Beispiel: Vollständige Integration

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="SmartCountdown/css/style.css">
    <title>SmartCountdown Demo</title>
</head>
<body>
    <div id="smart-countdown-container"></div>

    <script src="SmartCountdown/js/main.js"></script>
    <script>
        const days = 7, hours = 0, minutes = 0, seconds = 3;

        SmartCountdown("#smart-countdown-container", 
            new Date(new Date().getTime() + days * 86400000 + hours * 3600000 + minutes * 60000 + seconds * 1000), 
            {
                delimiter: ":", animation: 'rad', color: "#fff", background: "#000",
                onComplete: () => alert("Countdown erreicht null!")
            }
        );
    </script>
</body>
</html>