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>
<p id="demo"></p>
<script>
function myFunction() {
var online = "online"
var offline = "offline"
var waiting = "waiting"
var x;
var y;
var d = /* outcome of this variable will be extracted from serverlist.csv, but manually enter value here for now */ online;
switch (d) {
case 'waiting':
x = "Waiting...";
y = 'waiting';
break;
case 'online':
x = "Online!";
y = 'success';
break;
case 'offline':
x = "Offline!";
y = 'error';
break;
}
document.getElementById("demo").innerHTML = x;
document.getElementById(y).style.display = 'block';
}
window.onload = myFunction;
</script>
<img src="https://image.flaticon.com/icons/svg/130/130879.svg" id="success" style="display:none; width: 100px; height: 100px;"/>
<img src="https://image.flaticon.com/icons/svg/130/130877.svg" id="error" style="display:none; width: 100px; height: 100px;"/>
<img src="https://image.flaticon.com/icons/svg/130/130920.svg" id="waiting" style="display:none; width: 100px; height: 100px;"/>