Lab 7: Building A Coding Inquiry Portfolio

---

General Description

Welcome to your final lab! In this session, you will build a central coding portfolio to house the three primary projects you developed this semester: the card gallery, the click-and-point game, and the data dashboard.

You will achieve this by coding a homepage featuring interactive cards to showcase your work, and implement global navigation using an App Bar and a Navigation Drawer.

Learning Objectives

• Implement global navigation logic to allow users to switch between different hosted projects.
• Reflect on what you learned by writing project descriptions that highlight specific technical skills.

Table of Contents

---

1. Pre-requisite: Setup Your Project
2. Project Audit: Lab Projects Completed and Published
3. Structuring the Portfolio Content
4. Creating the Homepage Gallery
5. Building the Navigation Menu
6. Retrofitting: Connecting the Suite
7. Challenge: The Collective App
8. Wrap Up & Sharing Your Work

Pre-requisite: Setup Your Project

---

1. Create a new folder for this final lab.
2. Inside your new folder, create the app.js and index.html files with their starter/boilerplate code. Refer to Lab 2, section 3. Setup Starter Vuetify Code to complete this step.

Project Audit: Lab Projects Completed and Published

---

1. Verify that your 3 previous projects are completed and published to GitHub Pages. Refer to Lab 3, Section 7. Publishing Your Gallery With GitHub Pages to complete this step.
2. Keep your URLs ready. You will need the links ending in .github.io to populate your data array in the step below.

Structuring the Portfolio Content

---

1. In your app.js, create an Array of Objects called projects containing the details for your three completed labs. The example below includes fields like title, description, whatILearned, image, and url. Feel free to adjust as you see fit.

const projects = [
{
title: "Stranger Things Card Collection",
description: "A card gallery showcasing characters from the series Stranger Things.",
whatILearned: "In this lab I explored how to write JavaScript variables, data types, and objects, and display them within a card using the Vuetify library.",
image: "images/project1.png",
url: "https://artssci.github.io/labs/completed/lab3/"
},
{
title: "The Botanist Challenge Game",
description: "In this game, the player consults a reference card to learn a plant's needs and then click the correct actions in the right order to help it grow.", 
whatILearned: "I learned about functions, conditional logic, and reactivity to handle changes in the user interface and validate user choices.",
image: "images/project2.png",
url: "https://artssci.github.io/labs/completed/lab5/"
},
{
title: "Immigration Trends Data Dashboard",
description: "This is a Data Dashboard visualizing the 2025-2027 Canada Immigration Trends.",
whatILearned: "I practiced using Vuetify components like Sparkline, Stepper, and Data Table to transform complex datasets into an interactive experience.",
image: "images/project3.png",
url: "https://artssci.github.io/labs/completed/lab6/"
}
]

Creating the Homepage Gallery

---

1. Use v-row, v-col, and v-for to generate a v-card for each project in your array. Refer to Lab 3, section 3. Generating Cards with the v-for Loop and section 4. Styling and Layout for the Card Gallery to complete this step.
2. Once you have created the cards, use the :href command on the v-card component so that clicking anywhere on the card opens the project.

<v-card :href="item.url">

    <!-- Card content goes here -->

</v-card>
                    

💡 What is href: The href attribute specifies the URL (web address) of the page the link goes to. By adding this to your card, you make the entire card clickable.
• When you add the colon (:href), it becomes dynamic. This tells Vuetify to look into your app.js and read the specific URL for each project in your array.

Building the Navigation Menu

---

Adding Open/Close Functionality

1. In app.js, create a reactive variable called openDrawer and set it to false.
2. Create a function called toggleDrawer that allows the openDrawer variable to toggle between true and false (i.e., open or close). Refer to Lab 3, Section 3.2 Adding Toggle Functionality to Open/Close the Reference Card, to complete this step.

Create the Navigation Drawer

1. Create a navigation drawer using v-navigation-drawer.

<v-navigation-drawer>
</v-navigation-drawer>

2. Inside the drawer, use a v-list-item paired with a v-for loop to display each project's title.

<v-navigation-drawer>
    <v-list-item v-for="item in projects" :key="item.title">
    {{ item.title }}
    </v-list-item>
</v-navigation-drawer>

3. Use the :href attribute to ensure each list item links to the correct project URL.

<v-navigation-drawer>
    <v-list-item v-for="item in projects" :key="item.title" :href="item.url">
        {{ item.title }}
    </v-list-item>
</v-navigation-drawer>

4. Finally, connect the drawer to the variable openDrawer from above, using v-model.

<v-navigation-drawer v-model="openDrawer">
    <v-list-item v-for="item in projects" :key="item.title" :href="item.url">
        {{ item.title }}
    </v-list-item>
</v-navigation-drawer>

Create an App Bar

The app bar sits at the top of the page and holds the "hamburger" menu icon that triggers the drawer.

1. In index.html, add a v-app-bar, a v-app-bar-nav-icon, and a v-app-bar-title.

<v-app-bar>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-app-bar-title>Coding Inquiry Portfolio</v-app-bar-title>
</v-app-bar>

2. Add an @click command in the v-app-bar-nav-icon to call your toggleDrawer function created above. By clicking this icon, you will open or close the navigation drawer.

<v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>


3. Finally, once your homepage is ready, publish it to GitHub Pages and save the URL; you will need it for the next step. Refer to Lab 3, Section 7. Publishing Your Gallery With GitHub Pages.

Retrofitting: Connecting the Suite

---

1. Open your previous Lab 3, Lab 5, and Lab 6 code files.
2. Copy the projects array and the toggleDrawer function from your Lab 7 app.js into the app.js files of your previous labs.
3. Copy the v-app-bar and v-navigation-drawer components into each of your project HTML files.
4. Inside the v-navigation-drawer of your project pages, add a v-list-item above your loop that links back to your main Portfolio homepage.

   
   <v-navigation-drawer v-model="openDrawer">
       <v-list-item href="https://artssci.github.io/labs/completed/lab7/">Home</v-list-item>
       <v-list-item v-for="item in projects" :key="item.title" :href="item.url">
           {{item.title}}
       </v-list-item>
   </v-navigation-drawer>
               

5. Re-publish your projects by uploading your files to the same repositories on GitHub.

Optional Challenge: The Collective App

---

Add a 4th item to your projects array for your module of our Global Maritime Commerce and Whale Risks Collective App. To complete this step, you would need to publish it to GitHub.

Wrap Up & Sharing Your Work

---

Congratulations! You have successfully built a portfolio showcasing your coding inquiry projects. Here is the breakdown of the skills you practiced in this lab:

• Global Navigation Logic: You successfully implemented a v-app-bar and v-navigation-drawer for users to navigate between multiple applications/modules.
• Technical Reflection: You translated your coding experiences into descriptive narratives, highlighting the specific programming tools and logic you mastered throughout the term.