Photo Tiles

Time for another project! This checkpoint puts the last three lessons to work: components with props, events and slots. As in the previous checkpoints, the instructions say what the page should do, and how you write it is up to you. Each exercise continues where the previous one ended.

The project. A gallery of photos from a trip to Scotland. The photos are tiles in a grid, and a click on one shows it big, over the whole page, with its caption, until you close it. Over three exercises, you'll make the tiles, then the big view, and finally buttons that go to the next and the previous photo. Instead of real photos, the gallery has big emoji on colored tiles, so it needs no picture files. A real gallery would have an <img :src="photo.src"> there.

The data. The photos are in photos.json, an object for each photo:

{ "id": 1, "emoji": "🏔️", "caption": "Above the clouds", "place": "Ben Nevis", "color": "#cfe3f5" }

App.vue already has them: import photos from "./photos.json"; gives it the array that's in the file. (A project made with Vite can import JSON files this way.)

The task. Write the component PhotoTile.vue, which shows one photo, given to it in the prop photo. Its template has a button with the class tile: a tile is there to be clicked, and a button can be clicked with the keyboard too. In the button, show the emoji in a span with the class emoji, and the caption under it. The tile's background is the photo's color. The styles are ready in the component's <style scoped>. In App.vue, show a tile for each photo in the div with the class grid.

Then a click on a tile selects its photo: the tile emits the event select, and App.vue remembers which photo is selected. The selected photo's tile has the class selected, which gives it a green border. Only one photo is selected at a time. In the next exercise, the selected photo will show big.

A tip: the tile doesn't know which photo is selected; App.vue does. So the tile gets it from App.vue in a second prop, for example selected, which is true or false. And App.vue can remember the photo's position in the array, which v-for gives you: (photo, index) in photos. It'll come in handy in the last exercise.