Recipe - Countdown to Next Online Service

Skill level: Intermediate

Organization: Moving Communities to Christ

---

{# strip images & classes from the HTML but otherwise leave structure #}

Are you using LifeChurch's Online Church Platform? They offer a great countdown widget that you can access and add to your webpage, but unfortunately, it doesn't work on a Rock powered website (at least not for me). 

Desiring to have the countdown we rocked there code. 

To add the countdown to your Rock site:

1. Add a new HTML block to the page you desire the countdown on. 
2. Inside the block settings allow "webrequests". 
3. Enter the HTML below updating everywhere that says "[YOUR Church Online URL]" to your church's unique URL. 
4. Celebrate. 

---

<style type="text/css">
.countdown{
            background-color: #323232;
			background-position: center;
			background-size: cover;
			color: #fff;
			Padding: 20px 20px;
			text-align: center;
}
.CoundownTime {

}
</style>
{% webrequest url:'[YOUR Church Online URL]/api/v1/events/current'  %}
    {% for item in results %}
	    {% capture isLive %} {{ item.response.item.isLive }} {% endcapture %}
	    {% capture eventStartTime %}{{ item.response.item.eventStartTime }}{% endcapture %}
    {% endfor %}
{% endwebrequest %}



{% if isLive == 'true' %}
 <div class="row no-gutter countdown">
        <h1>Watch our live stream now:   <a href="[YOUR Church Online URL]/" class="btn btn-lg btn-primary">Join</a><h1>

</div>
{% elseif isLive contains 'false' %}
<div class="row no-gutter countdown">
    <div class="col-md-5">
        <h1>Our next live stream is in:</h1>
    </div>
    <div class="col-md-4">
        <div class="col-xs-3">
            <h3 id="Day"></h3>
            <p>days</p>
        </div>
        <div class="col-xs-3">
            <h3 id="Hours"></h3>
            <p>hours</p>
        </div>
        <div class="col-xs-3">
            <h3 id="Minutes"></h3>
            <p>mins</p>
        </div>
        <div class="col-xs-3">
            <h3 id="Seconds"></h3>
            <p>Secs</p>
        </div>
  </div>  
  <div class="col-md-3">
    <br><a href="[YOUR Church Online URL]" class="btn btn-lg btn-primary">Learn More</a>
    </div>    

</div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("{{ eventStartTime | Date:'MMM dd, yyyy HH:mm:ss'}}").getTime();

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

  // Get todays date and time
  var now = new Date().getTime();

    
  // Find the distance between now and the count down date
  var distance = countDownDate - now - 14400000;
    
  // 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="demo"
  document.getElementById("Day").innerHTML = days;
   document.getElementById("Hours").innerHTML = hours;
      document.getElementById("Minutes").innerHTML = minutes;
         document.getElementById("Seconds").innerHTML = seconds;
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>
{% endif %}

Screenshots

• /GetImage.ashx?guid=d9b2f1f6-1928-4859-8176-0a38a895228e