根据日期更改div类

Question

I'm building a little webpage to list the outstanding assignments I have at college.

Here's the code:

<div class="assignment">
    <div class="itemt green">DUE: 28/03/2014</div>
</div>

Here's the actual page: www.edavies.co/wkc

I would like the class green to be used if before the due date, the class amber for two weeks before the due date and finally the class red for one week before. If possible it would be cool to have black on the due date and afterwards.

Hope this makes sense. Anything is fine, PHP, JavaScript, jQuery.

Answer 1

check http://jsfiddle.net/NhmW7/, test it changing those dates. the function i made for this problem.

$( ".itemt" ).each(function() {

            var text=$(this).text();
            var res = text.split(" "); 
            var resta = res[1].split("/"); 
            var dd=resta[0];
            var mm=resta[1];
            var yy=resta[2];   // i couldnt test with dd/mm/yyy format, so i changed to mm/dd/yyy

            var now = new Date(); //"now"
            var duedate = new Date(mm+'/'+dd+'/'+yy)  // due date
            var diff = Math.abs(now-duedate); 

             var each_day = 1000 * 60 * 60 * 24;//milliseconds in a day
             var days = Math.round(diff / each_day);

             if(days <= 14)
                 $(this).removeClass("green").addClass("amber");
             if(days <= 7)
                 $(this).removeClass("amber").addClass("red");
             if(days > 14)
                 $(this).addClass("green");
         });