Simple count down timer

Forked from @gopi/simple-count-down-timer

This tailwind example is contributed by Alfredo Pineda Hernández, on 11-Jul-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Timer,Time counter

Widget Countdown Timer

Author Alfredo Pineda Hernández

Tailwind v3.4 10.5k 8

Fork Fullscreen

// Update the count down every 1 second
            var x = setInterval(function() {

// Get today's date and time
                var now = new Date().getTime();

// Find the distance between now and the count down date
                var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="countdown" 
                document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds +
                    "s ";

// If the count down is over, write some text 
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("countdown").innerHTML = "EXPIRED";
                }
            }, 1000);
        </script>
    </div>
</div>

Related Examples

Simple count down timer

Gopi Yadav

3 years ago

15.5k
Music Player

Abhijit Sen

3 years ago

18.4k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Prajwal Hallale

3 years ago

22.2k
3D Count downer

Hasan AlDoy (McDoy)

5 months ago

319
Old Times Pomodorro
When the love of time management goes beyond the management of love over time. ~ Rogue agent

Hasan AlDoy (McDoy)

5 months ago

424
"Coming Soon" landing page with countdown timer

Anonymous

1 year ago

1.2k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Komal Jain

2 years ago

3k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Jerome Soriano

2 years ago

2.6k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Ameth Galarcio

2 years ago

3.1k
Code card with copy Button
this example uses clipboard.js to copy the code

Joost Hietbrink

1 year ago

1.5k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Alok

3 years ago

19.3k
Weather Widget with 5-Day Forecast
A clean, modern weather widget built with HTML, Tailwind CSS, and vanilla JavaScript. Perfect for integrating weather information into any web project. Features: - Current weather display with temperature, conditions, and "feels like" temperature - 5-day forecast with daily highs and lows - Temperature unit toggle (Celsius/Fahrenheit) - Weather statistics including wind speed, humidity, and visibility - Fully responsive design that works on all screen sizes - Smooth hover animations and transitions - Semantic HTML5 structure for better accessibility and SEO - Schema.org structured data (JSON-LD) for rich snippets - No dependencies except Tailwind CSS CDN - Easy to customize with Tailwind utility classes Technical Details: - Markup: Semantic HTML5 with proper document structure - Styling: Tailwind CSS v3.x via CDN (utility-first approach) - JavaScript: Vanilla ES6+ (no frameworks or libraries required) - Accessibility: WCAG 2.1 compliant with ARIA labels, semantic elements, and keyboard navigation support - SEO Optimization: - Structured data using JSON-LD (Schema.org WeatherForecast type) - Open Graph and Twitter Card meta tags for social sharing - Semantic heading hierarchy (h1, h2) - Descriptive meta descriptions and keywords - Performance: Lightweight (~8KB HTML), minimal JavaScript, CSS loaded from CDN - Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge) - Mobile-First: Responsive grid layout with breakpoints for mobile, tablet, and desktop - **Customization:** Easily modify colors, layout, and data structure via Tailwind classes - State Management: Simple boolean toggle for temperature units with dynamic DOM updates - SVG Icons: Inline SVG graphics for weather conditions (scalable and customizable) API Integration Ready: The component uses mock data but is structured to easily integrate with weather APIs such as: - OpenWeatherMap - WeatherAPI - Visual Crossing - AccuWeather Simply replace the data object with your API response and map the fields accordingly.

Ijila Itunu

4 months ago

873