0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<blockquote><p>Meow! You did a good job, but this is no time to take a break!</p>
1
<blockquote><p>Meow! You did a good job, but this is no time to take a break!</p>
2
<p>We need to program a gallery with my photos for the website of our web design studio. Our customers need to know our heroic web developer in person!</p>
2
<p>We need to program a gallery with my photos for the website of our web design studio. Our customers need to know our heroic web developer in person!</p>
3
<p>The gallery consists of several thumbnails (elements with the gallery__photo-preview class) and a large photo (full-photo class) When you click on a thumbnail, it should change to a large image. The large image should correspond to the preview that the user clicked on.</p>
3
<p>The gallery consists of several thumbnails (elements with the gallery__photo-preview class) and a large photo (full-photo class) When you click on a thumbnail, it should change to a large image. The large image should correspond to the preview that the user clicked on.</p>
4
<p>The image data is collected in the photos array. Each element in the array is a path to the full-size photo. The order of the elements in this array is the same as the order of the thumbnails in the markup.</p>
4
<p>The image data is collected in the photos array. Each element in the array is a path to the full-size photo. The order of the elements in this array is the same as the order of the thumbnails in the markup.</p>
5
</blockquote><p>The web designer has already prepared everything: there are preview images inside buttons with the gallery__photo-preview class, and when users click on these buttons, they will change the contents of the large image (full-photo class). As is typical of these assignments, we have been asked to program the user interface interaction.</p>
5
</blockquote><p>The web designer has already prepared everything: there are preview images inside buttons with the gallery__photo-preview class, and when users click on these buttons, they will change the contents of the large image (full-photo class). As is typical of these assignments, we have been asked to program the user interface interaction.</p>
6
<p>First, find all of the thumbnails using querySelectorAll as well as the large image using querySelector, and then write the elements that have been found to variables.</p>
6
<p>First, find all of the thumbnails using querySelectorAll as well as the large image using querySelector, and then write the elements that have been found to variables.</p>
7
<p>We have already learned about querySelectorAll in <a>this assignment</a>as well as <a>in this one</a>from the “Getting to Know JavaScript in Your Browser” chapter. Take a look there if you have forgotten how this method works.</p>
7
<p>We have already learned about querySelectorAll in <a>this assignment</a>as well as <a>in this one</a>from the “Getting to Know JavaScript in Your Browser” chapter. Take a look there if you have forgotten how this method works.</p>