JSFiddle - React, Tailwind, and code Playground
HTML
<p>This demo is attempting to test out the functionality of switching images depending on server status from an external .csv report that will be generated from a powershell script. The goal is to build a responsive webpage dashboard.</p>
<div id="demo"></div>
CSS
.server-status::after {
content: '';
display: inline-block;
margin-left: 5px;
width: 20px;
height: 20px;
background-position: center;
background-size: 20px auto;
}
.server-Online::after {
background-image: url('https://image.flaticon.com/icons/svg/130/130879.svg');
}
.server-Offline::after {
background-image: url('https://image.flaticon.com/icons/svg/130/130877.svg');
}
JavaScript
var response = 'Server,Status\n\
Server1,Online\n\
Server2,Offline\n\
';
var lines = response.split('\n');
var servers = [];
$.each(lines, function(l, line) {
if( l && line ) {
var status = line.split(',');
servers.push({
'name': status[0],
'status': status[1]
})
};
});
var demo = $('#demo');
var demoHtml = '';
$.each(servers, function(s, server) {
demoHtml += '<p class="server-status server-' + server.status + '">' + server.name + '</p>\n'
});
demo.html( demoHtml );