add today's date and toggle button between British and American styles

2 files changed, 49 insertions, 1 deletions

diff --git a/index.html b/index.html
index 3a3c811..97134a5 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,8 @@
         </div>
         <div class="navbar-collapse collapse">
           <form class="navbar-form navbar-right" role="form">
-            <a href="http://teach.classdojo.com/" class="btn btn-default btn-lg active">ClassDojo</a>
+            <a id="date-toggle" class="btn btn-default btn-lg
+            active">Toggle date style</a>
             <a id="klaxon" class="btn btn-default btn-lg active"><u>K</u>laxon</a>
           </form>
         </div><!--/.navbar-collapse -->
@@ -84,6 +85,13 @@
           btn-block">Re<u>s</u>et timer (end of class)</a>
         </div>
       </div>
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+          <h1 id="date" class="text-center">,</h1>
+          <hr>
+        </div>
+      </div>
     </div> <!-- /container -->
 
     <script src="js/vendor/jquery-1.11.1.min.js"></script>
diff --git a/js/main.js b/js/main.js
index 11d76b6..a1afda2 100644
--- a/js/main.js
+++ b/js/main.js
@@ -108,6 +108,43 @@ function activityClockCustom()
     activityClockGo(parseInt(minutes) * 60 + parseInt(seconds));
 }
 
+// mplungjan on stack overflow: http://stackoverflow.com/a/15397495
+function nth(d) {
+  if(d>3 && d<21) return 'th'; // thanks kennebec
+  switch (d % 10) {
+        case 1:  return "st";
+        case 2:  return "nd";
+        case 3:  return "rd";
+        default: return "th";
+    }
+}
+
+function toggleDateStyle()
+{
+    var currentDate = $('#date').html();
+    var today = new Date();
+
+    var month = "January,February,March,April,May,June,July,August,September,October,November,December"
+  .split(",")[today.getMonth()];
+    var day = "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday"
+  .split(",")[today.getDay()];
+    var date = today.getDate();
+    var British = day + " " + date + nth(date) + " " + month + " " + today.getFullYear();
+    var American = day + " " + month + " " + date + nth(date) + ", " + today.getFullYear();
+
+    if (currentDate.indexOf(',') > -1)
+    {
+        $('#date').html(British);
+    }
+    else
+    {
+        $('#date').html(American);
+    }
+}
+
+// set initial date to British style
+toggleDateStyle();
+
 $(document).bind('keydown', 's', timeWastingClockReset);
 $(document).bind('keydown', 'r', activityClockReset);
 $(document).bind('keydown', 'c', activityClockCustom);
@@ -159,5 +196,8 @@ $(document).ready(function(){
 
     $('#activityClock300s').button();
     $('#activityClock300s').click(function (){activityClockGo(300);})
+
+    $('#date-toggle').button();
+    $('#date-toggle').click(function (){toggleDateStyle();});
 });