SmartCountdown - FirstDevKit

SmartCountdown Documentation

Problem Statement

Countdowns with style and precision.

Many countdown plugins offer basic functionality but fail to provide flexibility for animations, customization, and visual elegance. SmartCountdown stands out by offering customizable animations, precise scaling, and support for multiple styles, ensuring your countdown integrates seamlessly with your website design.

Usage

To use SmartCountdown, follow these steps:

Include the CSS and JS files in your project:

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

Add a container to your HTML where the countdown should be displayed:
```
<div id="smart-countdown-container"></div>
```

Call the SmartCountdown function in your JavaScript:

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: ":",       // Delimiter between time units (e.g., ":").
        animation: 'rad',     // Animation style ("rad" or "flip").
        color: "#fff",        // Text color for the digits.
        background: "#000",   // Background color for the digits.
        onComplete: () => {   // Callback function executed when the countdown reaches zero.
            alert("Countdown reached zero!");
        }
    }
);

Customization options:
- delimiter: Change the separator between time units, e.g., : or -.
- animation: Choose between "rad" for radial animation or "flip" for flipping digits.
- color: Set the text color of the digits.
- background: Set the background color of the digits.
- onComplete: Define a function to run when the countdown ends.

Directory Structure

Your project structure might look like this:

SmartCountdown/
│
├── css/
│   └── style.css          # Contains styles for the countdown animations and layout
│
├── js/
│   └── main.js            # Contains the logic for rendering the countdown
│
└── README.md              # Documentation

Example: Full Integration

<!DOCTYPE html>
<html lang="en">
<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 reached zero!")
            }
        );
    </script>
</body>
</html>