Enhance documentation for simplyCountdown.js with usage examples and …

…setup instructions - #54
VincentLoy · Dec 31, 2024 · d3fe8f5 · d3fe8f5
1 parent 2ef04cf
commit d3fe8f5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/docs/dist/assets/main.min..css b/docs/dist/assets/main.min..css
diff --git a/docs/dist/index.html b/docs/dist/index.html
@@ -402,12 +402,31 @@ <h2 id="usage" class="text-3xl font-bold mb-8 flex items-center gap-2">
                         <span class="icon-[lucide--code] w-6 h-6 text-indigo-600"></span>
                         Usage
                     </h2>
+
                     <h3 id="javascript-usage" class="text-xl font-bold mb-4 flex items-center gap-2">
                         Javascript - common usage
                     </h3>
+
                     <p class="mb-8 text-lg text-gray-300">
                         <strong class="font-bold text-indigo-400">simplyCountdown.js</strong> 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.
                     </p>
+
+                    <div class="sc-doc-block mb-8 bg-indigo-500/10 border border-indigo-500/30 rounded-xl">
+                        <div class="flex items-start gap-3 p-4">
+                            <span class="icon-[lucide--info] w-6 h-6 text-indigo-400 flex-shrink-0"></span>
+                            <div>
+                                <h4 class="font-bold text-indigo-400 mb-2">Before You Begin</h4>
+                                <p class="text-indigo-100">
+                                    First, create an HTML element that will contain your countdown. This element needs a unique selector (ID or class) that simplyCountdown will target:
+                                </p>
+                                <pre class="mt-2 bg-indigo-500/20 p-2 rounded"><code>&lt;div id="any-id" class="any-class theme-or-custom-theme"&gt;&lt;/div&gt;</code></pre>
+                                <p class="mt-2 text-indigo-200">
+                                    This element will be automatically populated with the countdown timer when initialized.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="sc-doc-block">
                         <h3 class="mt-8 mb-4 font-bold text-lg">ES module usage:</h3>
                         <pre><code class="language-javascript bg-slate-900 rounded-xl">