Added a Code Jam Countdown (#1eevq) (#43)

* added countdown

* updated jam dates

* added test

* flake8

* flake8 (i did it on wrong file)

5 files changed, 101 insertions, 0 deletions

diff --git a/app_test.py b/app_test.py
index 2176fe08..651d7a96 100644
--- a/app_test.py
+++ b/app_test.py
@@ -32,6 +32,11 @@ class SiteTest(TestCase):
 class RootEndpoint(SiteTest):
     """ Test cases for the root endpoint and error handling """
 
+    def test_countdown(self):
+        """ Check the countdown path responds with 200 OK """
+        response = self.client.get('/countdown', "http://pytest.local")
+        self.assertEqual(response.status_code, 200)
+
     def test_index(self):
         """ Check the root path reponds with 200 OK """
         response = self.client.get('/', 'http://pytest.local')
diff --git a/pysite/views/main/countdown.py b/pysite/views/main/countdown.py
new file mode 100644
index 00000000..f43d628c
--- /dev/null
+++ b/pysite/views/main/countdown.py
@@ -0,0 +1,10 @@
+# coding=utf-8
+from pysite.base_route import RouteView
+
+
+class CountdownView(RouteView):
+    path = "/countdown"
+    name = "countdown"
+
+    def get(self):
+        return self.render("main/countdown.html")
diff --git a/static/js/countdown.js b/static/js/countdown.js
new file mode 100644
index 00000000..0992a94e
--- /dev/null
+++ b/static/js/countdown.js
@@ -0,0 +1,50 @@
+var heading = document.getElementById("countdown-title");
+var daysDisplay = document.getElementById("days");
+var hoursDisplay = document.getElementById("hours");
+var minutesDisplay = document.getElementById("minutes");
+var secondsDisplay = document.getElementById("seconds");
+var startjam = new Date(Date.UTC(2018, 2, 24));
+var endjam = new Date(Date.UTC(2018, 2, 26));
+var goal;
+var now = Date.now();
+if (now+1000 >= endjam.getTime()) {
+    heading.innerHTML = "Code Jam has finished!";
+} else {
+    if (now > startjam.getTime()) {
+        heading.innerHTML = "Code Jam ends in...";
+        goal = endjam.getTime();
+    } else {
+        heading.innerHTML = "Next Code Jam starts in...";
+        goal = startjam.getTime();
+    }
+    var refreshCountdown = setInterval(function() {
+        var delta = goal - Date.now();
+        if (delta <= 1000) {
+            clearInterval(refreshCountdown);
+            location.reload();
+        }
+        var days = Math.floor(delta / (24*60*60*1000));
+        delta -= days * (24*60*60*1000);
+        var hours = Math.floor(delta / (60*60*1000));
+        delta -= hours * (60*60*1000);
+        var minutes = Math.floor(delta / (60*1000));
+        delta -= minutes * (60*1000);
+        var seconds = Math.floor(delta / 1000);
+        if (days < 10) {
+            days = "0"+days;
+        }
+        if (hours < 10) {
+            hours = "0"+hours;
+        }
+        if (minutes < 10) {
+            minutes = "0"+minutes;
+        }
+        if (seconds < 10) {
+            seconds = "0"+seconds;
+        }
+        daysDisplay.innerHTML = days;
+        hoursDisplay.innerHTML = hours;
+        minutesDisplay.innerHTML = minutes;
+        secondsDisplay.innerHTML = seconds;
+    }, 100);
+}
\ No newline at end of file
diff --git a/templates/main/countdown.html b/templates/main/countdown.html
new file mode 100644
index 00000000..846883d3
--- /dev/null
+++ b/templates/main/countdown.html
@@ -0,0 +1,30 @@
+{% extends "main/base.html" %}
+{% block title %}Countdown{% endblock %}
+{% block og_title %}Countdown{% endblock %}
+{% block og_description %}Countdown for Code Jams.{% endblock %}
+{% block content %}
+<h1 id="countdown-title" class="uk-heading-primary uk-text-center">Code Jam Countdown</h1>
+<div class="uk-section uk-section-muted">
+    <div class="uk-container">
+        <div class="uk-column-1 uk-column-1-2@s uk-column-1-4@m">
+            <div class="uk-tile uk-padding-small">
+                <h1 style="text-align: center">Days</h1>
+                <h1 id="days" class="uk-text-center" style="font-size: 200px">--</h1>
+            </div>
+            <div class="uk-tile uk-padding-small">
+                <h1 style="text-align: center">Hours</h1>
+                <h1 id="hours" class="uk-text-center" style="font-size: 200px">--</h1>
+            </div>
+            <div class="uk-tile uk-padding-small">
+                <h1 style="text-align: center">Minutes</h1>
+                <h1 id="minutes" class="uk-text-center" style="font-size: 200px">--</h1>
+            </div>
+            <div class="uk-tile uk-padding-small">
+                <h1 style="text-align: center">Seconds</h1>
+                <h1 id="seconds" class="uk-text-center" style="font-size: 200px">--</h1>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="/static/js/countdown.js"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index cabd0d87..385ad00d 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -29,6 +29,12 @@
                             <li class="uk-nav-item uk-hidden@m"><a href="/"><i class="uk-icon fas fa-home"></i> &nbsp;Home</a></li>
                             <li class="uk-nav-item uk-hidden@m"><a href="/invite"><i class="uk-icon fab fa-discord"></i> &nbsp;Discord</a></li>
                             <li class="uk-nav-divider uk-hidden@m"></li>
+                            
+                            {% if current_page.startswith("countdown") %}
+                                <li class="uk-active"><a href="/countdown">Code Jam Countdown</a></li>
+                            {% else %}
+                                <li><a href="/countdown">Code Jam Countdown</a></li>
+                            {% endif %}
 
                             {% if current_page.startswith("info") %}
                                 <li class="uk-nav-header uk-active"><a href="/info">Information</a></li>