Lab 3: Building a Card Gallery

General Description

In the previous lab, you created a single collectible card. Today, you will upgrade your project into a Card Gallery.

You will learn how to manage multiple items using Arrays and Objects, and use the Vuetify Grid system to automatically organize your cards into rows and columns.

Learning Objectives

1. Organize multiple data entries using a JavaScript Array of Objects.
2. Use Vuetify v-for loop to dynamically generate a list of cards.
3. Implement a responsive layout using Vuetify's Grid System.

Table of Contents

1. Expanding Your Data Collection
2. Organizing Data with an Array of Objects
3. Generating Cards with the v-for Loop
4. Styling and Layout for the Card Gallery
5. Adding a Global App Bar
6. Optional Challenge: Change the App Bar Color and Add a Footer
7. Publishing Your Gallery With GitHub Pages
8. Wrap Up & Sharing Your Work

Expanding Your Data Collection

1. Identify another 6-8 items (characters, athletes, plants, etc.) that fit your chosen theme from lab 1.
   • To make your cards look consistent, every item in your collection must have the same fields (e.g., name, birthplace, bio, etc).
2. Download an image for each new item. For the best-looking gallery:
   • Try to find images that are the same shape (all horizontal or all vertical).
   • For better organization, save all your images into a dedicated folder named images. Create this folder in the same place where your index.html and app.js files are located.

Organizing Data with an Array of Objects

In this step, you will create a single array that holds multiple objects, with each object containing your variables.

1. Open your app.js file from Lab 1.
2. Wrap the variables from your first card inside an object:
   • Place the variables inside curly brackets { }
   • Remove the const keywords
   • Change the asignment operator of each variable from = to :
   • Separate the variables with commas so the computer knows where one ends and the next begins

   
   {
   name: "Robin Buckley",
   info: "March 10, 1968 | Hawkins",
   bio: "A clever and multilingual employee at Scoops Ahoy...",
   image: "images/robin.jpg"
   }
   

   
   
   💡 Inside curly braces, we use a colon : to connect a label to its data. A colon is similar to the equal sign used in the past lab. Both assign values to a label/container (see https://www.w3schools.com/js/js_assignment.asp)
   
   
3. Repeat the process with the rest of your items, using the same variable names (e.g., name, info, bio, image) for each object:

   
   {
   name: "Robin Buckley",
   info: "March 10, 1968 | Hawkins",
   bio: "A clever and multilingual employee at Scoops Ahoy...",
   image: "images/robin.jpg"
   }
   
   {
   name: "Steve Harrington",
   info: "1966 | Hawkins",
   bio: "Former high school king turned babysitter extraordinaire...",
   image: "images/steve.jpg"
   }
   
   {
   name: "Dustin Henderson",
   info: "1971 | Hawkins",
   bio: "The brains of the operation with a love for science...",
   image: "images/dustin.jpg"
   }
   

4. Wrap the objects inside an array:
   • Place the objects inside square brackets [ ]
   • Separate the objects with commas so the computer knows where one ends and the next begins
   • Give the array a name using the const keyword

   
   const collection = [
               {
               name: "Robin Buckley",
               info: "March 10, 1968 | Hawkins",
               bio: "A clever and multilingual employee at Scoops Ahoy...",
               image: "images/robin.jpg"
               }, // <--- Don't forget the comma!
               {
               name: "Steve Harrington",
               info: "1966 | Hawkins",
               bio: "Former high school king turned babysitter extraordinaire...",
               image: "images/steve.jpg"
               },
               {
               name: "Dustin Henderson",
               info: "1971 | Hawkins",
               bio: "The brains of the operation with a love for science...",
               image: "images/dustin.jpg"
               }
       ]
   

5. Finally, add the name of your array to the return section at the bottom of your app.js. This will ensure your array is accessible from the index.html file in the next step.

   
   return {
     collection
   }
       

Generating Cards with the v-for Loop

1. Open your index.html from lab 1.
2. Inside your <v-card>, add the v-for command with the value "item in collection".
   💡 Tip: If you are using a different name in your array in step 2 above, use that name instead of "collection". For example if your array name is "characters", then type "item in characters"

   
   <v-card v-for="item in collection" width="400" class="mx-auto bg-red elevation-12"  >
           

3. Add an identifier to each of the cards using the key command with a value such as "item.name".
   • The keyword item followed by a dot . provides access to the name variable from the object in turn.
   • Add a colon : to the key command to reach/read the data from the name variable in your object.

   
   <v-card v-for="item in collection" :key="item.name" width="400" class="mx-auto bg-red elevation-12"  >
           

4. Add the item. keyword before each of your variables in the card. This allows reading the variable inside the object in turn.

   
     <v-card-title> {{ item.name }} </v-card-title>
     <v-card-subtitle> {{ item.birthplace }} </v-card-subtitle>
     <v-card-text> {{ item.bio }} </v-card-text>
     <v-img :src="item.image" height="200" cover></v-img>
           

   
   
   What is the dot . doing?

   The dot is called a property accessor. It provides access to an object's properties/variables.

   The syntax is:

   
   objectName.propertyName
           

   Check full explanation here:
   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

   
   
   
5. To see your work, save your changes and open a new tab in your browser (Chrome recommended). Then, press Ctrl + O (Windows) or Cmd + O (Mac) and select your index.html file.
   • Alternatively, you can open the folder where you saved your work and simply drag the index.html file directly into your browser window.

Styling and Layout for the Card Gallery

Aligning Your Card horizontally

1. Wrap your <v-card> inside a <v-container>, a <v-row>, and <v-col>.

<v-container>
  <v-row>
    <v-col>
      
      <v-card v-for="item in collection" :key="item.name" width="400" class="mx-auto bg-red elevation-12"  >
        <v-card-title>{{ item.name }}</v-card-title>
        <v-card-subtitle>{{item.birthday}} {{ item.birthplace }}</v-card-subtitle>
        <v-card-text>{{ item.bio }}</v-card-text>
        <v-img :src="item.image"> </v-img>
      </v-card>

    </v-col>
  </v-row>
</v-container>
        

2. Move the v-for and the :key from the <v-card> to the <v-col>. This will make Vuetify to create a new column for every card.

<v-container>
  <v-row>
    <v-col v-for="item in collection" :key="item.name" >
      
      <v-card width="400" class="mx-auto bg-red elevation-12"  >
      <v-card-title>{{ item.name }}</v-card-title>
        <v-card-subtitle>{{item.birthday}} {{ item.birthplace }}</v-card-subtitle>
        <v-card-text>{{ item.bio }}</v-card-text>
        <v-img :src="item.image"> </v-img>
      </v-card>

    </v-col>
  </v-row>
</v-container>
        

3. Inside <v-col> add the command cols and the value "3". This will divide the grid into 4 colums (12/3 = 4), placing one card per column.

<v-col cols="3" v-for="item in collection" :key="item.name" >
        

4. Finally, see save your changes and refresh the browser to see your cards horizontally aligned.

Styling the Cards

1. Remove Fixed Width: Delete the width and the mx-auto from your <v-card>.
   💡 Explanation: In a grid, the column (v-col) should decide how wide the card is. If you keep a fixed width (e.g., "400"), the card will overflow of its column on smaller screens or look off-center. By removing it, the card will automatically fill the column perfectly.

         
     <v-card class="bg-red elevation-12">
           

2. Standardize the Height:Add height="500" to your <v-card>.
   💡 Explanation: Because some characters have short bios and others have long ones, your cards will naturally be different lengths. This creates an uneven look where the rows don't line up. Setting a fixed height forces every card to be identical, creating a clean, professional gallery.

         
   <v-card height="500" class="bg-red elevation-12">
           

3. Save you changes and refresh the page to see the results.
   

Publishing Your Gallery With GitHub Pages

---

Now that your gallery is complete, let's put it on the internet for everyone to see!

To publish your page you will use GitHub Pages, which is a site hosting service designed to host pages directly from a GitHub repository. It is a simple, free way to publish websites online.

1. Go to https://github.com/.
2. Create an account using your McMaster email.
3. Follow the interactive tutorial below to learn how to setup a GitHub repository and upload and publish your app.

24 STEPS

1. Click Sign up and create an account

2. Sign in, after creating your account

3. Click Create new (+)

4. Click New repository

5. Add a name to your project. For example "Stranger Things Gallery"

6. Add a simple description to your project.

7. Make sure visibility is set to Public

8. Scroll down and click Create repository

9. In the next window, click uploading an existing file

10. Drag and drop your index.html and app.js files as well as the images folder

11. Scroll down and click Commit changes

12. To publish your app, click Settings

13. Scroll down and click Pages

14. Select Deploy from a branch

15. Under Branch, click None > main

16. Click Save

17. Go back to your project's page by clicking the project's name at the top

18. Click the gear icon in the About section on the right

19. Click Use your GitHub Pages website

20. Click Save changes

21. You'll see a small orange dot next to your latest commit (near the top of the repository) implying your app is being processed. Wait 2–3 minutes; once it turns into a green checkmark, your site is ready!

22. After 2-3 minutes, click the link under the About section to see your app online.

23.

24. That's it. You're done.

Here's an interactive tutorial

https://www.iorad.com/player/2671569/Publishing-Your-Gallery-Using-GitHub?iframeHash=watchsteps-1

Next step