Modern Repeating Countdown Timer App In jQuery

A modern countdown timer app that counts down to a specified date, in a loop or not.

Features:

• Countdown with limit date: Countdown with limit date allows you to select the target date, and it will stop when the countdown reaches zero.
• Countdown with repeat: Countdown with repeat, allows you to type the number of days you want to countdown. Once the counter reaches zero it will start over.

How to use it:

1. Load the latest jQuery library and other required resources in the document.

<link rel="stylesheet" href="/path/to/css/style.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/app.js"></script>

2. Code the HTML for the countdown timer.

<div class="container">
  <div class="options">
    <div class="limit">
      <button class="limit-button">Countdown with limit date</button>
      <p> <small>
        Countdown with limit date allows you to select the target date, and it will stop when the countdown reaches zero.
      </small></p>
    </div>
    <div class="repeat">
      <button class="repeat-button">Countdown with repeat</button>
      <p> <small>
        Countdown with repeat, allows you to type the number of days you want to countdown. Once the counter reaches zero it will start over.
      </small></p>
    </div>
  </div>
  <div class="form">
    <form>
      <button class="begin" type="submit">Start Countdown</button>
    </form>
  </div>
  <div class="wrapper">
    <div class="item">
      <div class="number">
        <span id="days">
          00
        </span>
      </div>
      <span>Days</span>
    </div>
    <div class="item">
      <div class="number">
        <span id="hours">
          00
        </span>
      </div>
      <span>Hours</span>
    </div>
    <div class="item">
      <div class="number">
        <span id="minutes">
          00
        </span>
      </div>
      <span>Minutes</span>
    </div>
    <div class="item">
      <div class="number">
        <span id="seconds">
          00
        </span>
      </div>
      <span>Seconds</span>
    </div>
  </div>
</div>

---

This awesome jQuery plugin is developed by ErikaEspejo. For more Advanced Usages, please check the demo page or visit the official website.