Changing Back Color of SP List Column in View

I have implemented in one of my previous project using below script.

Where we want to keep the background color of status field based on the value of Status and DueDate Field.


(function () {
    // Create object that have the context information about the field that we want to change it's output render
    var statusFiledContext = {};
    statusFiledContext.Templates = {};
    statusFiledContext.Templates.Fields = {
        // Apply the new rendering for status field on List View
"Status": { "View": statusFiledTemplate },
"DueDate": { "View": dueDateFiledTemplate }
    };
               
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFiledContext);
               
})();


// This function provides the rendering logic for list view
function statusFiledTemplate(ctx) {
    var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    switch (status) {
                case "Not Started":
return "<span style='background-color :rgb(186, 20, 26); color :WhiteSmoke; -moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px' >" + status + "</span>";
                                break;
                 case "In Progress":
return "<span style='background-color :rgb(252, 209, 22);-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + status + "</span>";
                                break;
                case "N/A":
return "<span style='background-color :rgb(210, 210, 210);-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + status + "</span>";
                case "Completed":
                                 return "<span style='background-color :rgb(85, 212, 85);-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + status + "</span>";
    }
}


function dueDateFiledTemplate(ctx) {
                 var duedate = ctx.CurrentItem.DueDate;
                var currentDate = new Date();
                var day = currentDate.getDate();
                var month = currentDate.getMonth() + 1;
                var year = currentDate.getFullYear();
                var today_date = month+"/"+day+"/"+year;
                var firstValue = duedate.split('/');
                var secondValue = today_date.split('/');
                var dueDate = new Date();
                dueDate.setFullYear(firstValue[2],(firstValue[0] - 1 ),firstValue[1]);
                var todayDate = new Date();
                todayDate.setFullYear(secondValue[2],(secondValue[0] - 1 ),secondValue[1]);
               
                 var status = ctx.CurrentItem.Status;
                if (dueDate < todayDate && (status == "Not Started" || status == "In Progress"))
                {
                                return "<span style='background-color :rgb(186, 20, 26); color :WhiteSmoke ; -moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + duedate + "</span>";
                }
                else
                {
                                return duedate;
                }
}