JSFiddle - React, Tailwind, and code Playground

by Firdaus Zailani

HTML

<button type="button" id="load_normal">Load Normal</button>
<button type="button" id="load_warning">Load Warning</button>
<button type="button" id="load_danger">Load Danger</button>

<div class="PageHeader">
    <img border="0" src=""/>
</div>

JavaScript

var site = 'Template';
var normalXML = '<sites> \
<site name="Template">\
       <headerImage>http://www.catchannel.com/images/older-cat-comfort.jpg</headerImage> \
       <productVersion>[Version goes here]</productVersion> \
 <systemStatus>Normal</systemStatus> \
       <networkNotes>System status is normal</networkNotes> \
    </site> \
</sites>';

var congestedXML = '<sites> \
<site name="Template">\
       <headerImage>http://static.ddmcdn.com/gif/kitten-cuteness300.jpg</headerImage> \
       <productVersion>[Version goes here]</productVersion> \
 <systemStatus>congested</systemStatus> \
       <networkNotes>System status is congested</networkNotes> \
    </site> \
</sites>';

var downXML = '<sites> \
<site name="Template">\
       <headerImage>http://static.ddmcdn.com/gif/cat_5-1.jpg</headerImage> \
       <productVersion>[Version goes here]</productVersion> \
 <systemStatus>down</systemStatus> \
       <networkNotes>System status is down</networkNotes> \
    </site> \
</sites>';

$('#load_normal').click(function (e) {
    e.preventDefault();
    var xml = $.parseXML(normalXML);
    process(xml)
})

$('#load_warning').click(function (e) {
    e.preventDefault();
    var xml = $.parseXML(congestedXML);
    process(xml)
})

$('#load_danger').click(function (e) {
    e.preventDefault();
    var xml = $.parseXML(downXML);
    process(xml)
})

function process(xml) {
    var root = $(xml).find("site[name='" + site + "']");
    var imageSrc=$(root).find("headerImage").text()
    $(".PageHeader img").attr("src",imageSrc)
}