See attached XML instructions. Using Visual Studio or equivalent IDE, create a w
ID: 3705397 • Letter: S
Question
See attached XML instructions.
Using Visual Studio or equivalent IDE, create a website made of one HTML file and one XML file For convenience, you can name the HTML file as "index.html" or other typical names. Copy the text of "XML Example 2" from https://www.w3schools.com/xml/default.asp. On this page, the name of this XML file is "simple.xml". Paste and save the text in a file named breakfast.xml. Then do following 1) Replace the first food item "Belgian Waffle" with a new food called "English Muffin". Replace its price, description, and calories with new values of your choice. Must use only replaceChild) method for the replacement, otherwise 20 points deduction will apply 2) Decrease every food item's price by 5 percent, including the muffin in step 1). This operation must be implemented with deleting a node and adding a new node approach, otherwise 20 points deduction will apply Before and after changing above specified change, print out every elements' value (i.e. content/text) for every food using innerHTML, with clear prompt.Explanation / Answer
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button type="button">Load BreakFast</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert("opening");
myFunction(this);
}
};
xmlhttp.open("GET", "breakfast.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>name</th><th>price</th></tr><tr><th>description</th><th>calories</th></tr>";
var x = xmlDoc.getElementsByTagName("food");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
"</td></tr>" +
x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue +
"</td></tr>" +
x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
function replaceChild(){
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("food");
x[0].getElementsByTagName("name")[0].childNodes[0].nodeValue = "English Muffin";
x[0].getElementsByTagName("price")[0].childNodes[0].nodeValue = "$3.33";
x[0].getElementsByTagName("description")[0].childNodes[0].nodeValue = "the new description";
x[0].getElementsByTagName("calories")[0].childNodes[0].nodeValue = "444";
//you cal replace each of food by this
}
</script>
</body>
</html>
//you need to delpoy this to sever so you can access this by http to use send service of xml.