根据日期更改div类

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.

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");
         });

I would go with the following route:

1. Store your assignments in a JSON array

{ "assignments": [ { "name": "Assignment 1", "dueDate": "11/03/2014" }, { "name": "Assignment 2", "dueDate": "11/04/2014" }, { "name": "Assignment 3", "dueDate": "11/07/2014" } ] }

1. Look into Handlebars, Mustache works too

2. Build a template and add some custom helper functions (tutorials on Handlebars) to alter the class depending on the dueDate

You could use Javascript for this. A solution with jquery should be something like adding the code below:

<script type="text/javascript">
$(document).ready(function(){
  var dueDate = new Date(2014,3, 28);
  var today = new Date();

  if (today>= dueDate){
    // or other conditions
    $(".itemt").addClass("expired");
 }else{
    $(".itemt").addClass("expired"); 
}
});
</script>

This is the idea - you can manage the css class by comparing the date in javascript. Good luck!

As you can use PHP it would be simple.

Add a placeholder in your html

<div class="item color_by_date_id1">DUE: 28/03/2014</div>

Then you parse the page on the request, replace the placeholder with a class name based on today's date and the date intervals for the particular placeholder, which could be stored in a server side config file or better, together with the items themselves.

The actual coding I am sure you can fix, after building the site already :)