JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="task-element"></div>

CSS

body{
  font-family: helvetica;
}

.task-element{
  position: relative;
  background-color: #eee;
  min-height: 100px;
}

.reportcard{
  text-align: center;
  left: 5px;
  bottom: 5px;
  position: absolute;
  display: inline-block;
}
.reportcard>p{
  text-align: center;
  line-height: 12px;
  margin: 0px;
  font-size: 9px;
  text-transform: uppercase;
}
.reportcard-score{
  line-height: 32px;
  width: 32px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
}

JavaScript

function evaluateReportCardScore(task_type,task,element){

	// get the trigger based on criteria
  
  if(parseInt((new Date(task.due_date).getTime() / 1000).toFixed(0)) > Date.now()/1000){
  
  	// task is not due yet so ignore reportcard
  
  	return false;
  
  }
  
  let trigger;
  
  if(parseInt(task.on_hold)){
  
  	trigger = "hold";
  
  } else if(parseInt(task.completed)){
  
  	trigger = "complete";
  
  } else {
  
  	trigger = "incomplete";
  
  }
  
  let matchedIndex = -1;
  
  let days_late;
  
  switch(trigger){
  
  	case "hold":
    
    for(let i=0;i<task_type.grading_configuration.length;i++){
    
    	if(task_type.grading_configuration[i].trigger == trigger){
      	
      	let reportTag = $('<div class="reportcard"><p>Score</p><div class="reportcard-score">' + task_type.grading_configuration[i].score + '</div></div>');
        
        reportTag.find('.reportcard-score').css('background-color',task_type.grading_configuration[i].bgcolor);
        reportTag.find('.reportcard-score').css('color',task_type.grading_configuration[i].color);
        
        element.append(reportTag);
        
        break;
      
      }
    
    }
    
    break;
    
    case "incomplete":
    
    days_late = parseInt(parseInt((Date.now()/1000) - parseInt((new Date(task.due_date).getTime() / 1000).toFixed(0)))/86400);
    
    matchedIndex = -1;
    
    for(let i=0;i<task_type.grading_configuration.length;i++){
    
    	if(task_type.grading_configuration[i].trigger == trigger){
      
        if(matchedIndex > -1){
        
        	if(days_late >= task_type.grading_configuration[i].condition_days){
  
            // matches
            
            matchedIndex = i;
            
          }
        
        
        } else {
        
        	// first match
          
         if(days_late >= task_type.grading_configuration[i].condition_days){
  
            // matches
            
            matchedIndex = i;
            
          }
        
        
    ...