→ Moana silva
→ Countdown timer

Countdown timer

Countdown timer with js

This bootstrap css example is contributed by Moana silva, on 19-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Widget

Author Moana silva

1.2k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0 text-center">Countdown Timer</h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-3">
                            <h3 id="days" class="display-4">00</h3>
                            <p>Days</p>
                        </div>
                        <div class="col-3">
                            <h3 id="hours" class="display-4">00</h3>
                            <p>Hours</p>
                        </div>
                        <div class="col-3">
                            <h3 id="minutes" class="display-4">00</h3>
                            <p>Minutes</p>
                        </div>
                        <div class="col-3">
                            <h3 id="seconds" class="display-4">00</h3>
                            <p>Seconds</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Update the countdown every 1 second
const x = setInterval(function() {
  // Get today's date and time
  const now = new Date().getTime();

// Find the distance between now and the countdown date
  const distance = countDownDate - now;

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

// Display the result
  document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
  document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
  document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
  document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');

// If the countdown is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("days").innerHTML = "00";
    document.getElementById("hours").innerHTML = "00";
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("seconds").innerHTML = "00";
  }
}, 1000);
</script>

More Examples

Calender

Author:
Anonymous

3 months ago

219

v.4.6
Bootstrap video player
Video player with buttons

Author:
Kemaya m

3 months ago

487

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

2 months ago

1.2k

v.5.3
Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

3 months ago

582

v.5.3
Typewriter Effect

Author:
Anonymous

3 months ago

258

v.4.6
Marquee Animation
On hover stop effect

Author:
Anonymous

3 months ago

686

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

2 months ago

217

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

2 months ago

1.2k

v.5.3
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

2 months ago

1.6k

v.4.6
Testimonial
with auto-scrolling testimonial cards

Author:
Sofia Petrova

3 months ago

240

v.5.3
Buttons with Icons

Author:
Prajwal Hallale

7 months ago

256

v.5.3
Testimonial carousel

Author:
Sofia Petrova

3 months ago

285

v.5.3

Didn't find component you were looking for?

Search from 200+ componenent