Homework Assignment Two

In this assignment, you’ll practice building layouts with stacks, extracting reusable views, and passing data through variables. The theme: Harry Potter house crests. You’ll pick two houses, style an information card for each, and use SwiftUI’s extract-view feature to avoid duplicating code.

Before You Begin

Step 1: Choose Your Houses

Pick the two houses that best represent you. You’ll use them throughout the rest of the assignment.

Step 2: Build One House Card

Build a polished card for your first house only. Style it to meet all of these requirements:

  1. Display the house crest image alongside the house name, animal, traits, and color values.
  2. Make each line of text a different style — vary the size, weight, and font to establish a clear visual hierarchy.
  3. Apply a background color that matches the house (use the RGB values in the reference table below). Add rounded corners with a corner radius of 10.
  4. Add at least 10 points of padding inside the background area.
Example: completed Gryffindor house card showing crest, name, animal, traits and color

Step 3: Extract the View

Once your first card looks the way you want, extract and reuse it for the second house:

  1. Command-click the outer VStack that contains your card, then choose Extract View. In Xcode 16+, use Refactor → Extract Selection to File instead.
  2. Create variables in the extracted struct for values that differ between houses: image name, house name, animal, traits, and background color.
  3. Use the extracted view to display your second house, passing its own values to each variable.
Code snippet: calling the extracted HouseCard view with variables

Step 4: Style ContentView

Link to both house cards from ContentView. Style the links to look polished — use rounded corners, matching dimensions, a background color, and descriptive labels.

House Reference

HouseAnimalTraitsRGB Color
GryffindorLionCourage, Bravery, Determination150, 51, 56
HufflepuffBadgerFairness, Hard Work, Loyalty241, 204, 96
RavenclawEagleWisdom, Creativity, Curiosity41, 50, 101
SlytherinSerpentAmbition, Cunning, Resourcefulness27, 117, 71