For This Particular Assignment, Complete The Following Instr
For This Particular Assignment Complete The Following Instructions And
For this particular assignment, create an XML file to hold data with at least four different tags containing data. Develop separate programs with code and CSS to display the records individually with navigation buttons, in a list format, and grouped with navigation buttons. Submit the XML file, the three program codes, and the execution addresses.
Paper For Above instruction
/ Basic CSS for styling display components /
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
font-size: 1.8em;
margin-bottom: 10px;
}
section {
margin-bottom: 30px;
}
button {
margin: 5px;
padding: 8px 12px;
font-size: 1em;
}
.record {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.list-container, .group-container {
margin-top: 15px;
}
XML Data Display and Navigation
Display Records Individually with Navigation
Display Records in a List
Display Records in Groups with Navigation
// Script for loading XML data and displaying records in various formats
// URLs for the XML data and programs
const xmlUrl = 'records.xml'; // Replace with actual path
const program1Url = 'program1.html'; // Replace with actual path to individual display program
const program2Url = 'program2.html'; // List display program
const program3Url = 'program3.html'; // Group display program
// Variables to hold XML data
let xmlDoc = null;
let records = [];
let currentIndex = 0;
let groupIndex = 0;
const groupSize = 3;
// Fetch XML data
fetch(xmlUrl)
.then(res => res.text())
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
.then(data => {
xmlDoc = data;
parseRecords();
displayIndividualRecord();
displayList();
displayGroup();
})
.catch(err => console.error('Error loading XML:', err));
// Parse XML data into records array
function parseRecords() {
const recordNodes = xmlDoc.getElementsByTagName('record');
for (let i = 0; i
const rec = recordNodes[i];
records.push({
name: rec.getElementsByTagName('name')[0].textContent,
age: rec.getElementsByTagName('age')[0].textContent,
email: rec.getElementsByTagName('email')[0].textContent,
id: rec.getElementsByTagName('id')[0].textContent
});
}
}
// Display individual record with navigation buttons
function displayIndividualRecord() {
const displayDiv = document.getElementById('recordDisplay');
displayDiv.innerHTML = '';
if (records.length === 0) {
displayDiv.innerHTML = '
No records found.
';return;
}
const record = records[currentIndex];
const recordDiv = document.createElement('div');
recordDiv.className = 'record';
recordDiv.innerHTML = `
Name: ${record.name}
Age: ${record.age}
Email: ${record.email}
ID: ${record.id}
`;
displayDiv.appendChild(recordDiv);
}
document.getElementById('prevBtn').addEventListener('click', () => {
if (records.length === 0) return;
currentIndex = (currentIndex - 1 + records.length) % records.length;
displayIndividualRecord();
});
document.getElementById('nextBtn').addEventListener('click', () => {
if (records.length === 0) return;
currentIndex = (currentIndex + 1) % records.length;
displayIndividualRecord();
});
// Display list of all records
function displayList() {
const listDiv = document.getElementById('listDisplay');
listDiv.innerHTML = '';
if (records.length === 0) {
listDiv.innerHTML = '
No records to display.
';return;
}
const ul = document.createElement('ul');
records.forEach((record) => {
const li = document.createElement('li');
li.innerHTML = `Name: ${record.name}, Age: ${record.age}, Email: ${record.email}, ID: ${record.id}`;
ul.appendChild(li);
});
listDiv.appendChild(ul);
}
// Display records in groups with navigation
function displayGroup() {
const groupDiv = document.getElementById('groupDisplay');
groupDiv.innerHTML = '';
if (records.length === 0) {
groupDiv.innerHTML = '
No records to display.
';return;
}
const startIndex = groupIndex * groupSize;
const endIndex = Math.min(startIndex + groupSize, records.length);
for (let i = startIndex; i
const record = records[i];
const groupRecordDiv = document.createElement('div');
groupRecordDiv.className = 'record';
groupRecordDiv.innerHTML = `
Name: ${record.name}
Age: ${record.age}
Email: ${record.email}
ID: ${record.id}
`;
groupDiv.appendChild(groupRecordDiv);
}
}
document.getElementById('groupPrevBtn').addEventListener('click', () => {
if (records.length === 0) return;
groupIndex = (groupIndex - 1 + Math.ceil(records.length / groupSize)) % Math.ceil(records.length / groupSize);
displayGroup();
});
document.getElementById('groupNextBtn').addEventListener('click', () => {
if (records.length === 0) return;
groupIndex = (groupIndex + 1) % Math.ceil(records.length / groupSize);
displayGroup();
});