JavaScript Date Math

index.html

  <h1>Treehouse Badges</h1>
  <div id = "earned"></div>
  <hr>
  <div id = "points"></div>
  <hr>
  <div id = "badge"></div>

JavaScript-Date-Math.markdown

JavaScript Date Math

Fun with JSON & Moment.js

A Pen by James Barnett on CodePen.

License.

script.js

$(document).ready(function() {

    /* edit these variables */

    var user = "jamesbarnett"; /* treehouse username */
    var beginning = false; /* get all data or limit the duration of the search */
    var duration_num = 1; /* if beginning = false specify the duration of the search*/
    var duration_unit = "years"; /* valid options are, years, months, weeks, days */

    /********************************/

    $.getJSON("http://teamtreehouse.com/" + user + ".json", function(data) {

        var joined = moment(data.badges[0].earned_date); /*first badge is always 'newbie' and is earned on your join date*/
        var now = moment();
        var start_time = null;
        var timeframe = null;
        var weeks = null;

        /*** check if using filtering time with a duration ***/
        if (beginning === true) {
            start_time = joined;
        }

        else {
            start_time = now.subtract(duration_unit, duration_num);
        }

        if (beginning === true) {
            timeframe = moment(joined).fromNow(true);
        }
        else {
            timeframe = moment.duration(duration_num, duration_unit).humanize();
        }

        if (beginning === true) {
            weeks = moment.duration((now - joined)).asDays() / 7;
        }
        else {
            weeks = moment.duration(duration_num, duration_unit).asDays() / 7;
        }

        console.log("start time: " + start_time);
        console.log("joined time: " + joined);
        console.log("timeframe: " + timeframe);
        console.log("weeks: " + weeks);

        /*** loop through json and count during timeframe ***/

        var output = "<ul>";
        var count = 0;
        var num = 1; /* number badge output from 1 instead of 0 */
        for (var i in data.badges) {
            if ((moment(data.badges[i].earned_date)) >= start_time) {
                output += "<li>";
                output +="<figure>";
                output +="<figcaption>" + data.badges[i].name + " <span>Earned on " + moment(data.badges[i].earned_date).format("MM-DD-YYYY") + "</span> </figcaption>";
                output += "<img src = '" + data.badges[i].icon_url + "'/>";
                output+="</figure>";
                output += "</li>";
                num++;
                count++;
            }
        }
        output += "</ul>";
        document.getElementById("badge").innerHTML = output;

        /*** badges per week stats ***/

        document.getElementById("earned").innerHTML = data.name + " has earned <span>" + count + " badges</span> in the past <span>" + timeframe + "</span>. That's an average of <span>" + (Math.round((count / weeks) * 100) / 100) + "</span>  badges <span>per week</span>";
    });

    /*** points ***/

    json = 'http://teamtreehouse.com/' + user + '.json', points = $('#points'), output = [];
    $.getJSON(json, function(results) {
        var result_array = results.points; /*Loop to display each category.*/
        $.each(result_array, function(i, val) {
            output += '<li>' + i + ": " + val + '</li>';
        });
        document.getElementById("points").innerHTML = output;
    });

});

style.css

body { margin: 50px; }

#earned { font-size: 30px; margin: 20px 0; padding: 0; }
#earned span { font-weight: bold; }
hr { margin: 20px 0; }

#badge li { 
  list-style-type: decimal;
  width: 300px; 
}

figure { text-align: center; }
figcaption { 
  margin: auto;
  font-weight: bold;
}

figcaption span { 
  display: block;
  font-style: italic;
  font-weight: normal;
}

img { 
  width: 40%; 
  margin-top: 15px;
  margin-bottom: 30px;
}