See the attached
// CIS 525 HW6, Lab 9.2 // Name:// Instruction #3 // add event listener to Document // TODO the main handler { // Instruction #3, third sentence const paintings = JSON.parse(content); const details = // TODO use querySelector const list // TODO const figure // TODO // Instruction 3, sentence 4 // Function call // TODO Call the function generate mini images - passing in the list and paintings as objects // use event delegation to handle clicks in list list.addEventListener('click', function(e) { if (e.target && e.target.nodeName == "IMG") { // TODO Call display large image function () } }); // Function definition to generate the mini images - this is used to select an image // TODO function ..... { // loop thru list of paintings and create
for (p of paintings) { const item = document.createElement('li'); const thumb = // TODO thumb.src = "images/small/" + p.id + ".jpg"; thumb.alt = p. // TODO thumb.dataset.id = // TODO - to make the click processing easier Instruction 3, sentence 5 // TODO append thumb by using appendChild method of item // TODO append item by using appendChild method of list } } // Function definition to display Large image after its mini image is selected // TODO function ...... { // retrieve the painting id from data-id attribute let id = // TODO get the the clicked Thumb's image ID // find that painting in array const painting = paintings.find( function (p) { return p.id == id;}); // display the found painting document.querySelector("#title").textContent = painting.title; document.querySelector("#artist").textContent = "By " + painting.artist; let image = document.createElement('img'); image.src = "images/large/" + painting.id + ".jpg"; // Instruction #4, third sentence // clear previous features // TODO clear out existing inner HTML value // display all features for this painting displayFeatures(painting.features); // add painting to image figure.appendChild(image); } function displayFeatures(features) { for (let f of features) { displaySingleFeatureRectangle(f); } } // Instruction #5 // function definition here that will display Single Feature Rectangle function displaySingleFeatureRectangle(feature) { let rect = document.createElement('div'); // TODO Instruction 5, sentence 5 // TODO assign using CSS class name // TODO Instruction 5, sentence 6 , set CSS (position, left, top, width, height) // TODO CSS set absolute // TODO set left and top based on feature - Instruction 5, sentence 8 - use px // TODO CSS set width and height by calculations - Instruction 5, sentence 9 - use px unit // Instruction #6 // add event handlers for the feature rectangle - WHEN MOUSE OVER // TODO for mouse over // TODO Use querySelector to get description value , Instruction #6, sentence 2 }); // Instruction #6 // add event handlers for the feature rectangle - WHEN MOUSE OUT // TODO on mouse out // TODO Use querySelector to erase description value, Instruction #6, sentence 4 }); // add the feature rectangle to the parent // TODO append the rectangle to the figure } });
