+
+
+
+
+
+
+
+

+ SimplyCountdown.js Documentation +

+

+ A minimal, zero-dependency countdown tool built with TypeScript support +

+
+
+
+
-

- +

+ Installation

@@ -184,23 +224,28 @@

-
npm install simplycountdown.js
-
yarn add simplycountdown.js
-
pnpm install simplycountdown.js
-
bun install simplycountdown.js
+
npm install simplycountdown.js
+
yarn add simplycountdown.js
+
pnpm install simplycountdown.js
+
bun install simplycountdown.js

Download Options

- Install simplyCountdown.js using your preferred package manager (npm, yarn, pnpm, or bun) or download directly from our repository. + Install simplyCountdown.js using your preferred package manager (npm, yarn, + pnpm, or bun) or download + directly from our repository.

+ class="text-indigo-400 hover:text-indigo-300 underline" target="_blank" + rel="noopener" + aria-label="Download simplyCountdown.js from GitHub repository"> Download simplyCountdown.js from GitHub (Free, Open Source) @@ -210,8 +255,8 @@

Download Options

-

- +

+ Why Choose simplyCountdown.js?

@@ -225,13 +270,15 @@

Key Benefits

- A lightweight JavaScript countdown library born from the need for simplicity. Perfect for websites, + A lightweight JavaScript countdown library born from the need for simplicity. + Perfect for websites, landing pages, events, and any web project requiring time-based countdowns.

- No complexity or dependencies - just add customizable countdown timers quickly. Ideal for developers - who need a reliable, performance-focused countdown solution. + No complexity or dependencies - just add customizable countdown timers quickly. + Ideal for developers who + need a reliable, performance-focused countdown solution.

@@ -240,15 +287,17 @@

Key Benefits

-

- +

+ Examples

- Explore various implementations of simplyCountdown.js below. From basic countdowns to complex customizations, - these examples demonstrate the library's versatility. Some examples includes their configuration code and - features different themes and options available in simplyCountdown.js. + Explore various implementations of simplyCountdown.js below. From basic + countdowns to complex customizations, these examples demonstrate the library's versatility. Some + examples includes their + configuration code and features different themes and options available in simplyCountdown.js.

@@ -258,7 +307,8 @@

Default Theme
-

Without Zero Units - Dark Theme

+

Without Zero Units - Dark + Theme

@@ -269,7 +319,8 @@

Inline

-

Count Up - Cyberpunk Theme

+

Count Up - Cyberpunk Theme +

@@ -284,7 +335,8 @@

Losange Theme
-

Complexe Pluralization - Russian Example

+

Complexe Pluralization - + Russian Example

@@ -339,15 +391,18 @@ 

Complexe Plurali

Control Example

- - - @@ -390,36 +445,45 @@

Control Example<

-
- -
+

-

- +

+ Usage

-

- Javascript - common usage -

+

Javascript - common + usage

- simplyCountdown.js offers seamless integration for creating dynamic countdown timers in your web projects. Whether you're using ES modules or traditional JavaScript, the library provides a straightforward API to implement countdowns for events, launches, or deadlines. Below are complete examples showing how to initialize and customize your countdown timer with various options and configurations. + simplyCountdown.js offers seamless + integration for creating dynamic + countdown timers in your web projects. Whether you're using ES modules or traditional + JavaScript, the library provides a + straightforward API to implement countdowns for events, launches, or deadlines. Below are + complete examples showing how to + initialize and customize your countdown timer with various options and configurations.

-
- -
+
+ +

Before You Begin

- First, create an HTML element that will contain your countdown. This element needs a unique selector (ID or class) that simplyCountdown will target: + First, create an HTML element that will contain your countdown. This element needs a + unique selector (ID or class) that simplyCountdown will target:

-
<div id="any-id" class="any-class theme-or-custom-theme"></div>
+
+
<div id="any-id" class="any-class theme-or-custom-theme"></div>
+

- This element will be automatically populated with the countdown timer when initialized. + This element will be automatically populated with the countdown timer when + initialized.

@@ -501,20 +565,19 @@

Browser (UMD):

-

- +

+ Countdown Controller

Control Methods API

Control your countdown timers with precision using the returned controller object. - simplyCountdown's API lets you stop, resume, and update countdowns dynamically. - Perfect for event scheduling, real-time updates, and interactive applications. + simplyCountdown's API lets you stop, resume, + and update countdowns + dynamically. Perfect for event scheduling, real-time updates, and interactive applications.

-

- The following methods are available for complete countdown management: -

+

The following methods are available for complete countdown management:


@@ -550,19 +613,33 @@ 

Control Methods API

-

- +

+ Available Themes

-

Countdown Ready-to-use Themes: Default, Dark, Cyberpunk, Circle & Losange Styles

+

+ Countdown Ready-to-use Themes: Default, Dark, Cyberpunk, Circle & Losange Styles +

- simplyCountdown offers multiple visually appealing themes to enhance your countdown timer's appearance. Each theme is carefully designed to suit different website styles and aesthetics, from minimal to modern designs. + simplyCountdown offers multiple visually + appealing themes to enhance + your countdown timer's appearance. Each theme is carefully designed to suit different website + styles and aesthetics, from + minimal to modern designs.

- The theme collection includes a clean default style, a sleek dark mode, a futuristic cyberpunk variation, an elegant losange theme, and a modern circle design. These themes are implemented through separate CSS files for optimal performance and easy customization. + The theme collection includes a clean default style, a sleek dark mode, a futuristic cyberpunk + variation, an elegant + losange theme, and a modern circle design. These themes are implemented through separate CSS + files for optimal performance + and easy customization.

- To implement any theme, simply include the corresponding CSS file in your HTML document's head section. Each theme maintains the countdown's functionality while providing unique visual presentations that can match your website's design language. + To implement any theme, simply include the corresponding CSS file in your HTML document's head + section. Each theme + maintains the countdown's functionality while providing unique visual presentations that can + match your website's design + language.

@@ -570,14 +647,24 @@

Countdown Ready-to-use The

Important Note About Themes

- Each theme requires its specific CSS class to be applied. Make sure to use the correct class name when implementing a theme: + Each theme requires its specific CSS class to be applied. Make sure to use the + correct class name when + implementing a theme:

    -
  • Default theme: simply-countdown
  • -
  • Dark theme: simply-countdown-dark
  • -
  • Cyberpunk theme: simply-countdown-cyber
  • -
  • Losange theme: simply-countdown-losange
  • -
  • Circle theme: simply-countdown-circle
  • +
  • Default theme: simply-countdown
  • +
  • Dark theme: simply-countdown-dark
  • +
  • Cyberpunk theme: simply-countdown-cyber +
  • +
  • Losange theme: simply-countdown-losange +
  • +
  • Circle theme: simply-countdown-circle +

@@ -609,22 +696,22 @@

Important Note About Themes

-

- +

+ Customize

-

Create your fully customized Countdowns Themes

-

- Customize your countdown timers with CSS to match your website's design perfectly. -

+

Create your fully customized Countdowns + Themes

+

Customize your countdown timers with CSS to match your website's design + perfectly.

- simplyCountdown.js provides a flexible HTML structure that's easy to style. - Whether you want minimal designs or elaborate displays, the library's modular structure lets you modify individual elements like numbers, labels, - and containers.
-

-

- Below is the base CSS structure you can customize: + simplyCountdown.js provides a flexible HTML + structure that's easy to + style. Whether you want minimal designs or elaborate displays, the library's modular structure + lets you modify individual + elements like numbers, labels, and containers.

+

Below is the base CSS structure you can customize:


     .custom-countdown-theme {
@@ -660,8 +747,8 @@ 

Create your fully custo
-

- +

+ What's new? v1.x/v2.x to v3.x

@@ -672,7 +759,9 @@

jQuery Support Removed

- jQuery is no longer supported to reduce dependencies and improve performance. This change ensures a more lightweight and modern library. + jQuery is no longer supported to reduce dependencies and improve performance. This change + ensures a more lightweight and + modern library.

@@ -682,7 +771,9 @@

Gulp to Vite Migration

- The build process has been migrated from Gulp to Vite, offering faster builds, better development server capabilities, and improved support for modern JavaScript features. + The build process has been migrated from Gulp to Vite, offering faster builds, better + development server capabilities, and + improved support for modern JavaScript features.

@@ -691,8 +782,10 @@

TypeScript Implementation

-

- The source code has been rewritten in TypeScript to enhance code quality, provide better type checking, and improve developer experience. +

+ The source code has been rewritten in TypeScript to enhance code quality, provide better type + checking, and improve + developer experience.

@@ -702,7 +795,9 @@

New Documentation

- A new documentation website has been launched to provide comprehensive guides, examples, and API references, making it easier for developers to integrate and use simplyCountdown. + A new documentation website has been launched to provide comprehensive guides, examples, and API + references, making it + easier for developers to integrate and use simplyCountdown.

@@ -712,7 +807,9 @@

Distribution Updates

- The distribution files have been reorganized to include multiple module formats (ES, UMD - CommonJS) and themes, ensuring compatibility with various development environments and build tools. + The distribution files have been reorganized to include multiple module formats (ES, UMD - + CommonJS) and themes, ensuring + compatibility with various development environments and build tools.

@@ -722,34 +819,38 @@

Package Manager Update

- The package manager has been switched from npm to Bun for faster installs and improved performance, offering a more efficient and modern package management experience. + The package manager has been switched from npm to Bun for faster installs and improved + performance, offering a more + efficient and modern package management experience.

-