Class class, information on our Classes and function to add this info

to the page

2 files changed, 88 insertions, 0 deletions

diff --git a/index.html b/index.html
index e56015b..157e2ee 100644
--- a/index.html
+++ b/index.html
@@ -94,6 +94,10 @@
           <hr>
         </div>
       </div>
+      <div id="classes" class="row">
+
+
+      </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 e5dac2a..6c3eb20 100644
--- a/js/main.js
+++ b/js/main.js
@@ -6,6 +6,88 @@
  *   than just stray function call
  */
 
+// class: one of the classes in our school
+var Class = function (grade, clas, total) {
+    this.grade = grade;
+    this.clas = clas;
+    this.total = total;
+    this.points = $.jStorage.get(this.grade + "_" + this.clas + "_" + "points", 0);
+    this.time = $.jStorage.get(this.grade + "_" + this.clas + "_" + "time", 0);
+};
+
+// save a class to local storage
+Class.prototype.save = function () {
+    $.jStorage.set(this.grade + "_" + this.clas + "_" + "points", this.points);
+    $.jStorage.set(this.grade + "_" + this.clas + "_" + "time", this.time);
+};
+
+// modify a class's points or time
+Class.prototype.changePoints = function (change) {
+    this.points = this.points + change;
+    this.save();
+    updateClasses();
+}
+Class.prototype.changeTime = function (change) {
+    this.time = this.time + change;
+    this.save();
+    updateClasses();
+}
+
+// now set up all our classes
+var classes = [
+    new Class(5, 1, 30),
+    new Class(5, 2, 30),
+    new Class(5, 3, 30),
+    new Class(6, 1, 19),
+    new Class(6, 2, 18),
+    new Class(6, 3, 19)
+];
+
+function classesComparison(a, b)
+{
+    if (a.points < b.points)
+        return -1;
+    if (b.points < a.points)
+        return 1;
+    return 0;
+}
+function sortClasses()
+{
+    classes.sort(classesComparison);
+}
+
+// function to update the HTML display of classes
+function updateClasses ()
+{
+    sortClasses();
+    var i = 0;
+    for (i = 0; i < classes.length; i++)
+    {
+        var classstring = classes[i].grade + '-' + classes[i].clas;
+        var minutes = Math.floor(classes[i].time / 60);
+        var seconds = classes[i].time - minutes * 60;
+        seconds = seconds.toString();
+        if (seconds.length == 1)
+            seconds = "0" + seconds;
+        if (i < 2)
+            var colour = " style=\"background-color: lightgreen;\"";
+        else
+            var colour = "";
+        $('#classes').append('<div class="col-md-2"' + colour + '> \
+          <h1>' + classstring + '</h1> \
+          <p class="text-center"> \
+            <a id="' + classstring + 'points" class="btn btn-info btn-lg">' + classes[i].points + ' points</a> \
+          </p> \
+          <p class="text-center"> \
+            <a id="' + classstring + 'time" class="btn btn-warning">' + minutes + ':' + seconds + ' this week</a> \
+          </p> \
+          <p class="text-center"> \
+            <a id="' + classstring + 'random" class="btn btn-success">Lucky number</a> \
+          </p> \
+        </div>');
+    }
+}
+
 $.ionSound({
     sounds: [
         {
@@ -223,5 +305,7 @@ $(document).ready(function(){
 
     $('#date-toggle').button();
     $('#date-toggle').click(function (){toggleDateStyle();});
+
+    updateClasses();
 });