Merge pull request #37 from ICESAT-2HackWeek/js_loading

Splashpage - Safari event countdown

cookiecutter.yaml

@@ -11,6 +11,8 @@ banner:
     title: Event Jupyter Book
     new_window: true
   image: https://github.com/ICESAT-2HackWeek/icesat-2hackweek.github.io/raw/2022.03.01/assets/images/banner.jpg
+# The opening session of the event with UTC offset
+event_countdown: "2023-08-07T08:30:00-07:00"
 about:
   description: Hackweeks are participant-driven events that strive to create welcoming spaces
     for participants to learn new things, build community and gain hands-on experience

{{ cookiecutter.repo_directory }}/assets/js/main.js

@@ -72,25 +72,20 @@ const spy = new Gumshoe('#navigation a', { offset: yOffset });
 // variables for time units
 const counterDiv = document.getElementById("countdown-box");
 const endDate = new Date(counterDiv.getAttribute('data-start-date'));
-let days, hours, minutes, seconds;
-
-function createCountdownSpans(className) {
-  const span = document.createElement("SPAN");
-  span.className = className;
-  return span
-}
-
-function updateCountdownHTML(span, value, unit) {
-  span.innerHTML = '<span class="number">' + value + '</span>' +
-    '<span class="unit">' + unit + '</span>';
-}
 
 function timeLeft() {
   // find the amount of "seconds" between now and target
   const currentDate = new Date().getTime();
   return (endDate - currentDate) / 1000;
 }
 
+function updateCounterNumberSpan(counterDiv, selector, number) {
+  const span = counterDiv.querySelectorAll(selector + ' span.number')[0];
+  if (span.innerHTML !== number.toString()) {
+    span.innerHTML = number;
+  }
+}
+
 function updateCounter(counterDiv) {
   let secondsLeft = timeLeft()
   let days = parseInt(secondsLeft / 86400);
@@ -103,28 +98,21 @@ function updateCounter(counterDiv) {
   let seconds = parseInt(secondsLeft % 60);
 
   // format countdown string + set tag value.
-  updateCountdownHTML(counterDiv.getElementsByClassName('days')[0], days, 'Days');
-  updateCountdownHTML(counterDiv.getElementsByClassName('hours')[0], hours, 'Hours');
-  updateCountdownHTML(counterDiv.getElementsByClassName('minutes')[0], minutes, 'Mins');
-  updateCountdownHTML(counterDiv.getElementsByClassName('secs')[0], seconds, 'Secs');
+  updateCounterNumberSpan(counterDiv, 'span.days', days);
+  updateCounterNumberSpan(counterDiv, 'span.hours', hours);
+  updateCounterNumberSpan(counterDiv, 'span.minutes', minutes);
+  updateCounterNumberSpan(counterDiv, 'span.seconds', seconds);
 }
 
 function startCountDown(counterDiv) {
   if (timeLeft() > 0) {
-    counterDiv.appendChild(createCountdownSpans('days'))
-    counterDiv.appendChild(createCountdownSpans('hours'))
-    counterDiv.appendChild(createCountdownSpans('minutes'))
-    counterDiv.appendChild(createCountdownSpans('secs'))
-
     // update the counter every 1 second
     setInterval(updateCounter, 1000, counterDiv);
   } else {
     document.getElementById("countdown-intro").remove();
   }
 }
 
-startCountDown(counterDiv);
-
 /* === Select schedule tab of current day */
 
 function today(){
@@ -141,4 +129,7 @@ function selectScheduleDay() {
   if(tab) { tab.click() }
 }
 
-selectScheduleDay()
+document.addEventListener("DOMContentLoaded", () => {
+  selectScheduleDay()
+  startCountDown(counterDiv);
+});

{{ cookiecutter.repo_directory }}/index.html

@@ -147,7 +147,13 @@ <h4 class="countdown-intro mb-2 text-center">
             </h4>
             <div id="countdown-box"
                  class="countdown-box"
-                 data-start-date="{{ cookiecutter.banner.start_date }}/{{ cookiecutter.banner.year}}">
+                 data-start-date="{{ cookiecutter.event_countdown }}">
+                {% for unit in ['days', 'hours', 'minutes', 'seconds'] %}
+                <span class="{{ unit }}">
+                    <span class="number"></span>
+                    <span class="unit">{{ unit.capitalize() }}</span>
+                </span>
+                {% endfor %}
             </div>
         </div>
     </div>
@@ -584,11 +590,11 @@ <h3 class="section-heading text-center mb-3">Our Sponsors</h3>
 </footer>
 
 <!-- Javascript -->
-<script src="assets/plugins/popper.min.js"></script>
-<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
-<script src="assets/plugins/smoothscroll.min.js"></script>
-<script src="assets/plugins/gumshoe/gumshoe.polyfills.min.js"></script>
-<script src="assets/js/main.js"></script>
+<script defer src="assets/plugins/popper.min.js"></script>
+<script defer src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
+<script defer src="assets/plugins/smoothscroll.min.js"></script>
+<script defer src="assets/plugins/gumshoe/gumshoe.polyfills.min.js"></script>
+<script defer src="assets/js/main.js"></script>
 
 </body>