Display 1st Sunday of Advent according to the selected year.

index.html

@@ -23,7 +23,7 @@
             </div>
         </nav>
 
-        <div id="content" class="d-flex flex-column align-items-center mx-5 my-3">
+        <div id="content" class="d-flex flex-column align-items-center">
         </div>
     </body>
 

static/css/ordomatic.css

@@ -1,3 +1,9 @@
+.content {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
 #logo {
     color: green;
     font-size: 1.2em;
@@ -7,4 +13,48 @@
     color: orange;
     font-family: LucidaHW;
     font-size: 1.5em;
+}
+
+.year {
+    background-color: antiquewhite;
+    color: blue;
+    font-size: 3em;
+    font-weight: 700;
+    padding: 5px;
+    text-align: center;
+    width: 100%;
+}
+
+.month {
+    background-color: lightgray;
+    color: green;
+    font-size: 1.5em;
+    font-weight: 700;
+    padding: 5px;
+    text-align: center;
+    width: 100%;
+}
+
+.line {
+    display: flex;
+    justify-content: start;
+    margin: 10px 0 0 0;
+    width: 30%;
+}
+
+.weekday {
+    font-weight: bold;
+}
+
+.day {
+    font-weight: bold;
+    margin: 0 0 0 5px;
+}
+
+.header {
+    margin: 0 0 0 5px;
+}
+
+.body {
+    margin: 0;
 }

static/js/ordomatic.js

@@ -1,15 +1,65 @@
 $(document).ready(function () {
-  // Display the year of the current liturgical year in the select_year:
-  var today = new Date();
-  var year = today.getFullYear();
-  var christmas = new Date(year, 11, 25);
-  var christmas_weekday = christmas.getDay();
-  var first_sunday_advent = new Date(christmas - (christmas_weekday + (21 * 24 * 3600 * 1000)));
-  if (today > first_sunday_advent) {
-    year += 1;
-  }
+  // On loading, display the liturgical year of the current date in the select_year:
+  var year = get_liturgical_year(new Date());
   $('#select_year').val(year);
+  refresh_ordo(year);
+
+  // On selecting a new year, refresh the ordo:
   $('#select_year').change(function () {
-    console.log($(this).val());
+    refresh_ordo($(this).val());
   });
 });
+
+
+function weekday_human_readable(weekday) {
+  return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][weekday];
+}
+
+function month_human_readable(month) {
+  return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][month];
+}
+
+function get_liturgical_year(date) {
+  var year = date.getFullYear();
+  var christmas = get_christmas_date(year);
+  var christmas_weekday = get_christmas_weekday(christmas);
+  var first_sunday_advent = get_first_sunday_advent(christmas, christmas_weekday);
+  if (date > first_sunday_advent) {
+    year += 1;
+  }
+  return year;
+}
+
+function get_christmas_date(year) {
+  return new Date(year, 11, 25);
+}
+
+function get_christmas_weekday(christmas) {
+  return christmas.getDay();
+}
+
+function get_first_sunday_advent(christmas, christmas_weekday) {
+  return new Date(christmas - ((21 + christmas_weekday) * 24 * 3600 * 1000));
+}
+
+function refresh_ordo(year) {
+  $('#content').html('');
+  var christmas = get_christmas_date(year - 1);
+  var christmas_weekday = get_christmas_weekday(christmas);
+  var first_sunday_advent = get_first_sunday_advent(christmas, christmas_weekday);
+  $('#content').append(
+    '<div class="year">' + first_sunday_advent.getFullYear() + '</div>'
+  );
+  $('#content').append(
+    '<div class="month">' + month_human_readable(first_sunday_advent.getMonth()) + '</div>'
+  );
+  $('#content').append(
+    '<div class="line">'
+    + '<span class="weekday">' + weekday_human_readable(first_sunday_advent.getDay()) + '</span>'
+    + ' '
+    + '<span class="day">' + first_sunday_advent.getDate() + '</span>'
+    + '<span class="header">First Sunday of Advent</span>'
+    + '</div>'
+    + '<div class="body">Ad Vigilias dicitur Resp. <i>Aspiciens</i>.</div>'
+  );
+}