You can use the JS Link functionality of list view and can achieve this result easily.
Here is some code that you need to put in a JS file, Lets say in TaskListJSLink.js
.
(function () {
var statusFieldCtx = {};
statusFieldCtx.Templates = {};
statusFieldCtx.Templates.Fields = {
"Status": { //The internal name of that column.
"View": StatusFieldViewTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
function StatusFieldViewTemplate(ctx) { //Function to change the status styling
var statusValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; //To get the current item's status value.
if (statusValue == "Completed") {
return "<div style='background-color:green;color:white'>" + statusValue + "</div>";
}
if (statusValue == "In Progress") {
return "<div style='background-color:red;color:white'>" + statusValue + "</div>";
}
else{
return statusValue;
}
}
})();
Next step is to add the file reference into list view. Suppose your JS file is currently in /SiteAssets/TaskListJSLink.js
So, edit the page and edit the list web part.
In the miscellaneous section, add the link reference in JS Link setting as - ~sitecollection/SiteAssets/TaskListJSLink.js
.
The ~sitecollection
is required in the beginning to provide correct path otherwise it won't work.
Now, Save the changes and see the magic.

Well, you can achieve more with this JSLink functionality like -

Ping me if you want to know.