# Countdown

## Component #1

- Preview
- HTML
- JS

# We're coming soon.

Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.

##

##### Days

##

##### Hours

##

##### Mins

##

##### Secs

Enter email

                    <!-- Content -->
                    <div class="d-md-flex">
                      <div class="container d-md-flex align-items-md-center vh-md-100 content-space-t-3 content-space-b-1 content-space-b-md-3 content-space-md-0">
                        <div class="row justify-content-md-between align-items-md-center flex-grow-1">
                          <div class="col-9 col-md-5 mb-5 mb-md-0">
                            <img class="img-fluid" src="../assets/svg/illustrations/oc-yelling.svg" alt="SVG Illustration">
                          </div>
                          <!-- End Col -->

                          <div class="col-md-6">
                            <!-- Heading -->
                            <div class="mb-4">
                              <h1>We're coming soon.</h1>
                              <p>Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.</p>
                            </div>
                            <!-- End Heading -->

                            <div class="js-countdown row mb-5">
                              <div class="col-3">
                                <h2 class="js-cd-days h1 text-primary mb-0"></h2>
                                <h5 class="mb-0">Days</h5>
                              </div>
                              <!-- End Col -->

                              <div class="col-3">
                                <h2 class="js-cd-hours h1 text-primary mb-0"></h2>
                                <h5 class="mb-0">Hours</h5>
                              </div>
                              <!-- End Col -->

                              <div class="col-3">
                                <h2 class="js-cd-minutes h1 text-primary mb-0"></h2>
                                <h5 class="mb-0">Mins</h5>
                              </div>
                              <!-- End Col -->

                              <div class="col-3">
                                <h2 class="js-cd-seconds h1 text-primary mb-0"></h2>
                                <h5 class="mb-0">Secs</h5>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <form>
                              <!-- Input Card -->
                              <div class="input-card input-card-sm border">
                                <div class="input-card-form">
                                  <label for="subscribeForm" class="form-label visually-hidden">Enter email</label>
                                  <input type="text" class="form-control form-control-lg" id="subscribeForm" placeholder="Enter email" aria-label="Enter email">
                                </div>
                                <button type="button" class="btn btn-primary btn-lg">Subscribe</button>
                              </div>
                              <!-- End Input Card -->
                            </form>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Content -->

                    <!-- JS Implementing Plugins -->
                    <script src="../node_modules/countdown/countdown.js"></script>

                    <script>
                      (function () {
                        // INITIALIZATION OF COUNTDOWN
                        // =======================================================
                        const oneYearFromNow = new Date()

                        document.querySelectorAll('.js-countdown').forEach(item => {
                          const days = item.querySelector('.js-cd-days'),
                            hours = item.querySelector('.js-cd-hours'),
                            minutes = item.querySelector('.js-cd-minutes'),
                            seconds = item.querySelector('.js-cd-seconds')

                          countdown(oneYearFromNow.setFullYear(
                            oneYearFromNow.getFullYear() + 1),
                            ts => {
                              days.innerHTML = ts.days
                              hours.innerHTML = ts.hours
                              minutes.innerHTML = ts.minutes
                              seconds.innerHTML = ts.seconds
                            },
                            countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS
                          )
                        })
                      })()
                    </script>