----------------------------------------------------

ch09-proj2.html:

Delegation + Mouse Event Handling

---------------------------------------------------------

ch09-proj2.css:

body { font-family: Roboto, sans-serif; } h1 { background-color: #291d89; color: white; text-align: center; padding: 5px; margin: 0; font-size: 1.5em; } h2 { margin: 0; font-size: 1.25em; } h3 { margin: 0; font-size: 1em; } .grid-container { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 1fr; grid-template-areas: ". ."; } #paintings { margin-top: 5px; max-height: 610px; overflow-y: scroll; background-color: #f0f4ff; } #paintings ul { list-style: none; margin: 0; padding: 15px 20px; } #paintings li { margin: 0; } #paintings img { width: 170px; } #summary { margin-top: 0.25em; } #details { padding: 10px;

} #details p { margin: 0; } #details figure { position: absolute; margin: 10px 0; padding: 0; } #full { height: 500px;

} .box { border: 1px solid red; background-color: #3d3D3d; opacity: 0.4; } #description { font-size: 0.85em;

position: relative; top: 515px; }

------------------------------------------------------------------------------------------- paintings.json:

const content = ` [

{ "id": "099160", "artist": "Raphael", "year": 1510, "title": "The School of Athens", "museum": "Vatican Museum, Rome", "features": [ { "upperLeft": [ 310,255 ], "lowerRight": [ 397,368 ], "description": "In the center of the fresco, at its architecture's central vanishing point, are the two undisputed main subjects of the painting: Plato (pointing up) on the left and Aristotle (gesturing outwards) on the right." }, { "upperLeft": [ 260,365 ], "lowerRight": [ 333,485 ], "description": "Heraclitus is the dark melancholic philosopher, so here he is portrayed separate from the rest. Evidently also modeled on Michelangelo." }, { "upperLeft": [ 27,311 ], "lowerRight": [ 85,376 ], "description": "Represents Epicurus who founded a highly influential school of philosophy. He and his followers were known for eating simple meals and discussing a wide range of philosophical subjects, and he openly allowed women to join the school." }, { "upperLeft": [ 593,325 ], "lowerRight": [ 684,476 ], "description": "This group represents a variety of natural philosophers. Thought to be: Euclid, Strabo, and Ptolemy." }, { "upperLeft": [ 152,247 ], "lowerRight": [ 244,310 ], "description": "This group is thought to represent these important Athenian public intellectuals: Pericles, Xenophon, Aeschines, and Socrates." } ] }, { "id": "095010", "artist": "Botticelli", "year": 1482, "title": "La Primavera (Spring)", "museum": "Uffuzi Gallery, Florence", "features": [ { "upperLeft": [ 560,131 ], "lowerRight": [ 741,406 ], "description": "Zephyrus, the biting wind of March, kidnaps and possesses the nymph Chloris, whom he later marries and transforms into a deity. She becomes the goddess of Spring, eternal bearer of life, and is scattering roses on the ground" }, { "upperLeft": [ 467,141 ], "lowerRight": [ 545,456 ], "description": "Flora, goddess of spring. Chloris (to the right) has been transformed into Flora." }, { "upperLeft": [ 341,100 ], "lowerRight": [ 449,400 ], "description": "n the centre (but not exactly so) and somewhat set back from the other figures stands Venus, a red-draped woman in blue. Like the flower-gatherer, she returns the viewer's gaze." }, { "upperLeft": [ 129,151 ], "lowerRight": [ 331,462 ], "description": "On the left of the painting the Three Graces, a group of three females also in diaphanous white, join hands in a dance." }, { "upperLeft": [ 23,106 ], "lowerRight": [ 99,410 ], "description": "At the extreme left Mercury, clothed in red with a sword and a helmet, raises his caduceus or wooden rod towards some wispy gray clouds." } ] }, { "id": "105010", "artist": "Rembrandt", "year": 1632, "title": "The Anatomy Lesson of Dr. Nicolaes Tulp", "museum": "Mauritshuis Museum, The Hague", "features": [ { "upperLeft": [ 363,128 ], "lowerRight": [ 466,300 ], "description": "Dr. Nicolaes Tulp was appointed praelector of the Amsterdam Anatomy Guild in 1628. One of the responsibilities of this position was to deliver a yearly public lecture on some aspect of human anatomy. Rembrandt notes the doctors significance by showing him as the only person who wears a hat. " }, { "upperLeft": [ 170,310 ], "lowerRight": [ 509,429 ], "description": "The cadaver, a recently executed thief named Adriaen Adriaenszoon, lies nearly parallel to the picture plane." }, { "upperLeft": [ 142,63 ], "lowerRight": [ 336,300 ], "description": "Seven colleagues surround Dr. Tulp, and they look in a variety of directionssome gaze at the cadaver, some stare at the lecturer, and some peek directly at the viewer. Each face displays a facial expression that is deeply personal and psychological. " } ] }, { "id": "104020", "artist": "Velazquez", "year": 1635, "title": "The Surrender of Breda", "museum": "Prado, Madrid", "features": [ { "upperLeft": [ 3,180 ], "lowerRight": [ 179,362 ], "description": "The losing soldiers in the conflict, the Dutch, are on the left and appear disorganized, youthful, and few in number." }, { "upperLeft": [ 368,192 ], "lowerRight": [ 496,238 ], "description": "The victorious Spanish troops on the right are presented as a large, well-organized, and veteran group. " }, { "upperLeft": [ 243,227 ], "lowerRight": [ 305,288 ], "description": "Justinus van Nassau, the Dutch commander of Breda, hands the keys to the city to the Spanish captain, Ambrogio Spinola." }, { "upperLeft": [ 316,205 ], "lowerRight": [ 365,291 ], "description": "The center of the painting is dominated by the exchange of the keys. Ambrogio Spinola, the captain of the Spanish troops, receives the keys of the city from Justinus van Nassau. Having descended from his horse, and looking at the Dutch commander eye-to-eye, Spinola places his hand over Justinus shoulder, most likely in order to stop him from kneeling." } ] }, { "id": "005010", "artist": "Jacques-Louis David", "year": 1784, "title": "The Oath of the Horatii", "museum": "Louvre, Paris", "features": [ { "upperLeft": [ 61,171 ], "lowerRight": [ 209,440 ], "description": "Three brothers from a Roman family, the Horatii, agree to end a war between Rome and another city by fighting three brothers from the other city." }, { "upperLeft": [ 248,162 ], "lowerRight": [ 378,361 ], "description": "The three brothers, all of which appear willing to sacrifice their lives for the good of Rome, are shown saluting their father who holds their swords out for them." }, { "upperLeft": [ 419,284 ], "lowerRight": [ 620,400 ], "description": "The wives and children of the three brothers are much less excited about the prospect of a battle to the death." } ] }

]`;

--------------------------------------------------------------------------------------------------------------------------------------

ch09-proj2.js:

/* add your code here */