Thursday, August 8, 2013

Countdown to Class Beginning

Class will begin shortly so to get back in the game I created a countdown to one minute before class officially begins.  You can view the countdown at the following location.

http://www.nwktc.edu/maed/appdevcountdown.html

There are a couple of things to note about the countdown.
  • It is set to general mountain time so the -0600 Time Stamp
  • The font automatically changes size to the width of the window
  • It detects when the day occurs and changes from until class starts to Since Class Began.
Here is the Javascript for the page.  The page itself has only 1 div that has an id of label. 

<script>
    //This is the date we are counting down to.
    var dateClassStarts = new Date("August 12, 2013 7:59:00 -0600");
   
    $(document).ready(function(){
        //Write out the original Difference in time.
        writeOutTime();
       
        //Size the font to the window.
        resizeFontToWindow();
       
        //Update the timer every second.
        setInterval(writeOutTime,1000);
    });
   
    //If the window resizes, we want the font to change.
    $(window).resize(function(){
       resizeFontToWindow();
    });
   
    function writeOutTime(){
        //Get new Time
        var currentTime = new Date();
        //Calculate the entire difference in milliseconds.
        var difference = dateClassStarts - currentTime;
       
        //Determine if the class is in the future or the past.
        var classHasStarted = false;
        if (difference < 0) {
            classHasStarted = true;
        }
       
        //Take the absolute value so you always have positive values. 
        difference = Math.abs(difference);
       
        //86400000 is 1000 * 60 * 60 * 24
        //Calculate the Days, Hours, Minutes, and Seconds.
        //Note the use of the floor so it ignores the remainder.

        var days = Math.floor(difference/86400000);
        difference -= days * 86400000;
        var hours = pad(Math.floor(difference/ 3600000),2);
        difference -= hours * 3600000;
        var minutes = pad(Math.floor(difference / 60000),2);
        difference -= minutes * 60000;
        var seconds = pad(Math.floor(difference / 1000),2);
       
        //Put the String together.
        var dataString = days + " Days<br> " + hours + ":" + minutes + ":" + seconds + "<br >";
       
        //Add to the string if the class has begun or not.
        if (classHasStarted) {
            dataString += "Since Class Began";
        }else{
            dataString += "Until Class Starts";
        }
       
        //update your label
        $("#label").html(dataString);
    }
   
    function resizeFontToWindow()
    {
        //Get the Width of the Div that holds the label
        var widthOfLabelDiv = $("#label").width();
        //Calculate a new font size based off that width
        var newFontSize = widthOfLabelDiv / 9;
        //Animate to that new size in 100 milliseconds
        $("#label").animate({
            fontSize: newFontSize + "px"
        },100);
       
    }
   
   
    //Changes the numbers so that they are 05 instead of 5 when you have a size of 2.
    function pad(num, size) {
        var s = num+"";
        while (s.length < size) s = "0" + s;
        return s;
    }
</script>