Show icon based on time difference

[Master]

I want to show a custom icon based on the minutes difference in a report page

if >30 minutes

between 30 and 60 mins

if more than 60

 

How can I do it?

 

[MayMusic]

Lets say you have two date fields called Date1 and Date2 also a unique field for each row called Id
 

<div id="show[@field:Id]"></div>
<script>
var d1 = new Date('[@field:Date1]');
var d2= new Date('[@field:Date2]');

var hourDiff =d2 - d1;

var minDiff = hourDiff / 60 / 1000;

if (minDiff  < 30){
document.getElementById('show[@field:Id]').innerHTML = '<img src="http://someapp.com/nk/icons/greenstar.png" width="100px"/>';
}
else if (30<minDiff && minDiff <120 ){
document.getElementById('show[@field:Id]').innerHTML ='<img src="http://someapp.com/nk/icons/redstar.jpe" width="100px"/>';
}else if (minDiff >120){

document.getElementById('show[@field:Id]').innerHTML ='<img src="http://someapp.com/nk/icons/yellowstar.jpe" width="100px"/>';

}

</script>