Be sure the #$6$error in the Requirements section does not encounter, $($see last box section in the screenshot$)$Guaranteed upvote if there is no #$6$error$,$ fully completed properly with and a really short paragraph explaining all the codes, really short.

For this project, you need to load an XML file using an AJAX call and display values in the table.

Requirements:

$1.$ Must use a pure CSS framework and load it via CDN$.$

$2.$ Must load XML file.

$3.$ Data must be loaded via AJAX call using XMLHttpRequest$()$ object.

$4.$ Must assume that you don$$t know how many authors will be displayed in each $.$ Assume that inside each tag you$$ll have only $1$ author and $1$ book.

$5.$ Must use a nested $$for$$ loop. DON$$T hardcore authors$/$books$.$

$6.$ Need to check that parsed data is not null, see in data.section. In case of errors $(.$xml file cannot be loaded; request timeouts or XML data cannot be parsed$)$ much display the following notification: $($See last section box in the screenshot provided$)$

Easily $$emulate$$ errors by changing URL or timeout property. Must also provide error notification if the XML file doesn$$t have an $$events$$ section.

$7.$ Code must be reasonably optimised: don$$t pollute global scope with variables. Create$/$use methods in appropriate objects and functions, avoid duplicate code, cache selectors, etc.

$8.$ Be sure there are no console messages of any kind and no debugging code left.

$9.$ JavaScript code must NOT crash

$10.$ Must not use external JavaScript$/$CSS files. Everything must be in the index.html file.

Hints:

$1.$ Need to add an extra $$Event$$ column where it displays the name of the event.

$2.$ Need to use XML DOM Traversing $($might want to use $.$children, $.$getAttribute$(),$ etc.

$3.$ Use XML DOM getAttribute$()$ method to display $$price$$ of the book and author$$s title.

$4.$ To avoid text nodes use $.$children$()$ instead of $.$childNodes$(),.$firstElementChild instead of $.$firstChild, etc.

$5.$ Always use console.dir$()$ to troubleshoot the code and JS objects. For example try:

data $=$ this.responseXML;

var events $=$ data.getElementsByTagName$("$event$")$;

console.log$($events$)$;

console.log$($events$[0].$children$)$;

$6.$ Need to use a nested loop. To optimise code please cache long objects.

$7.$ You can hardcore indexes only for $2$ tags: author and book. For example, assume the tag is the first tag inside $.$ Then would have used something like obj.children$[0].$text.Content to display name of an author

$8.$ The $$title$$ of the event is only displayed in the first row. Create a variable $$title$$ that has event info. You will create rows using variable rows: rows $+=+$ title $++.....,$ After you created first row you can simple reset the title using title$=$;

$9.$ Use correct $$colspan$$ for error notifications.