Question

1. In the.js file, write the JavaScript code for this application. Within the click event handlers for the elements in the sidebar, use the title attribute for each link to build the name of the JSON file that needs to be retrieved. Then, use that name to get the data for the speaker, enclose that data in HTML elements that are just like the ones that are used in the starting HTML for the first speaker, and put those elements in the main element in the HTML. That way, the CSS will work the same for the Ajax data as it did for the starting HTML. 2. Don’t forget to clear the elements from the main element before you put the new Ajax data in that element. 3. Verify there are no errors.

Answer 1

Kindly note that the codes below must be executed through any server like apache, xampp, ngnix, etc...

Step-by-step explanation:

Other files are not changed... only speakers.js modified

speakers.js

$(document).ready(function() {

$("#nav_list li").click(function() {

var title = $(this).children("a").attr("title");

$.get(title + ".json", function(data, status) {

data = data['speakers'][0];

$("main h1").html(data['title']);

$("main h2").html(data['month']+"<br />"+data['speaker']);

$("main img").attr("src", data.image);

$("main p").html(data.text);

});

});

});