Craft-calendar countdown

chopNew.js

      jQuery(function() {
        days = void 0;
        hours = void 0;
        minutes = void 0;
        seconds = void 0;
        intervalId = void 0;
        return $.ajax({
          url: "/api/data.json",
          dataType: "json",
          success: function(data) {
            var seconds_till;
            $("#churchonline_counter").show();
            if (data.response.item.isLive) {
              return goLive();
            } else {
              seconds_till = ((new Date(data.response.item.eventStartTime)) - (new Date())) / 1000;
              days = Math.floor(seconds_till / 86400);
              hours = Math.floor((seconds_till % 86400) / 3600);
              minutes = Math.floor((seconds_till % 3600) / 60);
              seconds = Math.floor(seconds_till % 60);
              return intervalId = setInterval(function() {
                if (--seconds < 0) {
                  seconds = 59;
                  if (--minutes < 0) {
                    minutes = 59;
                    if (--hours < 0) {
                      hours = 23;
                      if (--days < 0) {
                        days = 0;
                      }
                    }
                  }
                }

        if (days.toString() == 1) {
          $("#churchonline_counter .co-countdown-days").html("1");
        } else {
          $("#churchonline_counter .co-countdown-days").html((hours.toString().length < 2 ? days : days));
        };
        if (hours.toString() == 1) {
          $("#churchonline_counter .co-countdown-hours").html("1");
        } else {
          $("#churchonline_counter .co-countdown-hours").html((hours.toString().length < 2 ? hours : hours));
        };
        if (minutes.toString() == 1) {
          $("#churchonline_counter .co-countdown-mins").html("1");
        } else {
          $("#churchonline_counter .co-countdown-mins").html((minutes.toString().length < 2 ? minutes : minutes) + " ");
        };
        $("#churchonline_counter .co-countdown-secs").html((seconds.toString().length < 2 ? "0" + seconds : seconds));
        if (days === 00) {
          $('.daysAll').hide();
        };
        if (hours === 00) {
          $('.hoursAll').hide();
        };
        if (seconds === 0 && minutes === 10 && hours === 0 && days === 0) {
          return clearInterval(intervalId);
        };
        $("#eventTitle").html((data.response.item.title));
              }, 1000);
            }
          },
          error: function(xhr, ajaxOptions, thrownError) {
            return console.log(thrownError);
          }
        });
      });

countdown.css

  .co-header-countdown-time {
        display: inline-block;
        margin: 0px 14px 0px 16px;
    }

    .co-reminder-header-title {
        display: inline-block;
        vertical-align: top;
        line-height: 57px;
    }

    .co-countdown-unit {
        display: inline-block;
        padding: 8px 16px 0 14px;
    }

    .co-countdown-time div:before {
        border-left: none;
    }

    .co-countdown-time div {
        border-right: none;
    }

    .co-countdown-digit {
        font-size: 2rem;
        line-height: 0.8;
        display: block;
    }

    .co-countdown-digit-label {
        font-size: 12px;
        color: #6c6d73;
    }

    .co-countdown {
        color: white;
        background-color: #1d1d1f;
        text-align: center;
        position: relative;
    }

    .co-countdown .co-countdown-time div:first-child {
        border-left: none;
    }

    .co-countdown .co-countdown-time div:last-child {
        border-right: none;
    }

    .co-countdown .co-countdown-time {
        height: 100%;
    }

    .co-countdown .co-countdown-wrapper {
        padding-bottom: 29.5%;
        background-color: #313234;
        color: #fff;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .co-countdown .co-countdown-wrapper>div {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .co-countdown .co-countdown-unit {
        position: relative;
        top: 50%;
        margin-top: -28.5px;
    }

    .co-countdown .co-countdown-information {
        /*
        display: none;
        */
    }

    .co-countdown-header {
        text-align: center;
        background: #313234;
    }

    .co-countdown-header>div {
        padding: 20px 0 12px;
    }

    .co-countdown-header h2 {
        color: #FFFEFE;
        font-size: 24px;
        display: inline;
        font-weight: 200;
        vertical-align: top;
        line-height: 60px;
        margin-right: 30px;
    }

    .co-countdown-header .co-countdown-unit {
        -webkit-transform: initial;
        transform: initial;
        top: initial;
        color: white;
    }

    .co-countdown-header {
        background-color: #1d1d1f;
    }

    .co-header-countdown-time div:first-child {
        border-left: 1px solid #494a4e;
    }

    .co-header-countdown-time div {
        border-right: 1px solid #494a4e;
    }

countdown.twig

                    <div class="co-reminder-header co-countdown-wrapper" id="churchonline_counter">
                        <div class="live">Welcome to our livestream</div>
                        <div id="countdown-header">
                            <span class="co-reminder-header-title">Next livestream in</span>
                            <div data-behavior="header-countdown-clock" class="co-header-countdown-time">
                                <div class="info">
                                    <div class="title"></div>
                                    <div class="description"></div>
                                </div>
                                <div class="co-countdown-unit">
                                    <span class="co-countdown-digit co-countdown-days">00</span>
                                    <span class="co-countdown-digit-label">days</span>
                                </div>
                                <div class="co-countdown-unit">
                                    <span class="co-countdown-digit co-countdown-hours">00</span>
                                    <span class="co-countdown-digit-label">hours</span>
                                </div>
                                <div class="co-countdown-unit">
                                    <span class="co-countdown-digit co-countdown-mins">00</span>
                                    <span class="co-countdown-digit-label">mins</span>
                                </div>
                                <div class="co-countdown-unit">
                                    <span class="co-countdown-digit co-countdown-secs">00</span>
                                    <span class="co-countdown-digit-label">secs</span>
                                </div>
                            </div>
                            <!--button class="btn btn-inverse">
                                <i class="fa fa-clock-four"></i>
                                Add to calendar
                            </button-->
                            
                            <!--a href="#" class="co-header-countdown-close">
                                <i class="fa fa-calendar-xmark"></i>
                            </a-->
                        </div>
                    </div>

data.json.twig

{% header "Content-Type: application/json; charset=utf-8" %}
{% header "Access-Control-Allow-Origin: *" %}
{% set currentEventId = craft.app.request.segment(3) %}
{% for event in craft.calendar.events({id: 'not ' ~ currentEventId,rangeStart: 'today',rangeEnd: '1 month',limit: 1}) %}
{
    "meta": {
        "status": 200 },
        "response": {
            "item": {
                "isLive": {% include 'isLive.twig' %},
                "eventStartTime": "{{ event.startDate.format("Y-m-d G:i:s") }}",
                "eventEndTime": "{{ event.endDate.format("Y-m-d G:i:s") }}",
                "title": "{{ event.title }}"
            }
        }
    }
{% endfor %}