2a:null 2b:["$","title",null,{"children":"Exercise: Image Carousel | Steve Oney | Observable"}] 30:T467,html`

`31:T12e9,setTimeout(() => { const images = [{ url: 'https://upload.wikimedia.org/wikipedia/commons/d/d4/University_of_Michigan_Law_School.jpg', alt: 'Exterior shot of the University of Michigan Law School on a Winter day.', description: 'The University of Michigan Law School (Michigan Law) is the law school of the University of Michigan, in Ann Arbor. Founded in 1859, the school offers Juris Doctor (JD), Master of Laws (LLM), and Doctor of Juridical Science (SJD) degree programs.' }, { url: 'https://upload.wikimedia.org/wikipedia/commons/1/15/University_of_Michigan_College_of_Pharmacy_exterior.JPG', alt: 'Exterior shot of the University of Michigan College of Pharmacy on a Fall day.', description: "Pharmacy was first taught at the University of Michigan in 1868 within the College of Literature, Science and the Arts. A School of Pharmacy, the nation's first school of pharmacy at a state university, was established on December 29, 1876, by Albert B. Prescott. As the first dean, Dr. Prescott introduced the concept of basic science education as a prerequisite to practical training for those pursuing a pharmacy degree." }, { url: 'https://upload.wikimedia.org/wikipedia/commons/3/32/Michigan_Union_at_Night%2C_University_of_Michigan_Campus%2C_Ann_Arbor%2C_Michigan.JPG', alt: 'Exterior shot of the Michigan Union at night in the winter at the University of Michigan.', description: 'The Michigan Union is a student union at the University of Michigan. It is located at the intersection of South State Street and South University Avenue in Ann Arbor, Michigan. The building was built in 1917 and is one of several unions at the University of Michigan.' }, { url: 'https://upload.wikimedia.org/wikipedia/commons/6/6a/University_of_Michigan_August_2013_036_%28North_Campus_Diag%29.jpg', alt: 'Exterior shot of the "diag" on the University of Michigan North Campus on a Summer day.', description: 'Space on the University of Michigan campus became inadequate to accommodate the post-war growth of the University. In anticipation of this growing need, the Regents had begun to acquire farmland property on the sloping hills lying just to the northeast of the Huron River. Although there were some early thoughts given to relocating the School of Education, Natural Resources, Music, and Fine Arts to the North Campus, the construction of the Phoenix Memorial Project soon re-purposed the site for engineering research. More specifically, the early plans for the North Campus included the Cooley Memorial Laboratory to house the electronics research associated with the Willow Run Laboratories, the Phoenix Memorial Laboratory, the Automotive Laboratory, and a storage library. The development of the rest of the campus would proceed as needs arose and funds were secured. Possible projects suggested for the long-range future included a fine arts center where teaching facilities in music, theater, television, architecture, and design could be concentrated; residence halls and multiple-housing units for both single and married students, and staff; and facilities for the study of natural resources.' }, { url: 'https://upload.wikimedia.org/wikipedia/commons/1/17/Umichlawquadrangle.jpg', alt: 'Exterior shot of the Law Quad at the University of Michigan on a Spring day.', description: 'The Law School was founded in 1859, and quickly rose to national prominence. By 1870, Michigan was the largest law school in the country.' }]; const featuredImage = document.getElementById("featured"); const thumbnails = document.getElementById("thumbnails"); const current_description = document.getElementById("current_description"); function setFeaturedImageIndex(idx) { const img_details = images[idx]; const imgElement = img_details.element; featuredImage.setAttribute("src", img_details.url); featuredImage.setAttribute("alt", img_details.alt); current_description.textContent = img_details.description; const previouslyHighlightedImage = images[highlightedImgIndex] previouslyHighlightedImage.element.removeAttribute('class'); imgElement.setAttribute('class', 'highlighted'); highlightedImgIndex = idx; clearTimeout(advanceTimeout); advanceTimeout = setTimeout(() => { setFeaturedImageIndex((idx+1)%images.length); }, 5000); } let advanceTimeout; let highlightedImgIndex = 0; for(let i = 0; i { setFeaturedImageIndex(i); }); thumbnails.append(imgElement); } setFeaturedImageIndex(highlightedImgIndex); }, 1000)32:Tee1,md` ## Part 1: Going from a list of URLs to image elements. The variable \`images\` is assigned to a list of URLs and descriptions: \`\`\`JavaScript const images = [{ url: 'https://upload.wikimedia.org/wikipedia/commons/d/d4/University_of_Michigan_Law_School.jpg', alt: 'Exterior shot of the University of Michigan Law School on a Winter day.', description: 'The University of Michigan Law School (Michigan Law) is the law school of the University of Michigan, in Ann Arbor. Founded in 1859, the school offers Juris Doctor (JD), Master of Laws (LLM), and Doctor of Juridical Science (SJD) degree programs.' }, { url: 'https://upload.wikimedia.org/wikipedia/commons/1/15/University_of_Michigan_College_of_Pharmacy_exterior.JPG', alt: 'Exterior shot of the University of Michigan College of Pharmacy on a Fall day.', description: "Pharmacy was first taught at the University of Michigan in 1868 within the College of Literature, Science and the Arts. A School of Pharmacy, the nation's first school of pharmacy at a state university, was established on December 29, 1876, by Albert B. Prescott. As the first dean, Dr. Prescott introduced the concept of basic science education as a prerequisite to practical training for those pursuing a pharmacy degree." }, { url: 'https://upload.wikimedia.org/wikipedia/commons/3/32/Michigan_Union_at_Night%2C_University_of_Michigan_Campus%2C_Ann_Arbor%2C_Michigan.JPG', alt: 'Exterior shot of the Michigan Union at night in the winter at the University of Michigan.', description: 'The Michigan Union is a student union at the University of Michigan. It is located at the intersection of South State Street and South University Avenue in Ann Arbor, Michigan. The building was built in 1917 and is one of several unions at the University of Michigan.' }, { url: 'https://upload.wikimedia.org/wikipedia/commons/6/6a/University_of_Michigan_August_2013_036_%28North_Campus_Diag%29.jpg', alt: 'Exterior shot of the "diag" on the University of Michigan North Campus on a Summer day.', description: 'Space on the University of Michigan campus became inadequate to accommodate the post-war growth of the University. In anticipation of this growing need, the Regents had begun to acquire farmland property on the sloping hills lying just to the northeast of the Huron River. Although there were some early thoughts given to relocating the School of Education, Natural Resources, Music, and Fine Arts to the North Campus, the construction of the Phoenix Memorial Project soon re-purposed the site for engineering research. More specifically, the early plans for the North Campus included the Cooley Memorial Laboratory to house the electronics research associated with the Willow Run Laboratories, the Phoenix Memorial Laboratory, the Automotive Laboratory, and a storage library. The development of the rest of the campus would proceed as needs arose and funds were secured. Possible projects suggested for the long-range future included a fine arts center where teaching facilities in music, theater, television, architecture, and design could be concentrated; residence halls and multiple-housing units for both single and married students, and staff; and facilities for the study of natural resources.' }, { url: 'https://upload.wikimedia.org/wikipedia/commons/1/17/Umichlawquadrangle.jpg', alt: 'Exterior shot of the Law Quad at the University of Michigan on a Spring day.', description: 'The Law School was founded in 1859, and quickly rose to national prominence. By 1870, Michigan was the largest law school in the country.' }]; \`\`\` Write code that, for each item in \`images\`, creates a new \`\` element (with the appropriate \`src\` and \`alt\` attributes) and adds it to \`div#thumbnails\` `33:[] 2e:{"id":"92ef287e87528452","slug":"si-579-lecture-9","title":"Exercise: Image Carousel","thumbnail":"a841480d5686d82fb65af74d135ab730573e47052eac4f2daaced47251923066","access_level":"public","create_time":"$D2021-02-17T05:31:11.038Z","update_time":"$D2023-10-02T17:49:37.244Z","view_time":null,"first_public_time":"$D2021-02-17T19:23:06.224Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":89,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Exercise: Image Carousel","cells":[{"id":0,"value":"md`# Exercise: Image Carousel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"md`\n## In case you missed it\n\nThe [\\`debugger\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement allows us to freeze the JavaScript evaluation engine.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"md`\n### [JavaScript Events](https://observablehq.com/@soney/si-579-javascript-events)\n### [JavaScript Scope](https://observablehq.com/@soney/javascript-scoping?collection=@soney/si-579)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`\n## Exercise: Building an Image Carousel\n\nDownload [Files -> Lectures -> Lecture 08](https://umich.instructure.com/courses/445374/files/folder/Lecture%20Files/Lecture%2009) and edit \\`carousel.js\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"md`\n## Part 2: Making the images clickable\n\nNow, you should see a list of images. Next, make it so that when you click on a given image, the \\`src\\` and \\`alt\\` of the \\`img#featured\\` element updates to show that image. Also, update the \\`#current_description\\` element so that it has a description of that image.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`\n## Part 3 (Challenge): Highlighting the focused image\n\nNext, make it so that the image that you currently have focused is higlighted in a red border (you can do this by adding the class \\`highlighted\\` and specifying in CSS that \\`.highlighted\\` elements have: \\`border: 1px solid red;\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"md`\n## Part 4 (Challenge): Auto-Advance\n\nAdd an \"auto-advance\" feature where your image carousel automatically advances to the next image after 4 seconds if the user hasn't clicked anything. If they have clicked something, the timer should automatically reset.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"