Homework Assignment Two

In this assignment, you’ll practice building layouts with stacks, refactoring 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 refactor feature to avoid duplicating code.

Before You Begin

• Not sure which houses represent you? Take the Wizarding World sorting quiz.
• Download the house crest images, unzip the file, and drag all four images into Assets.xcassets.
• You only need to build one house card first — you’ll refactor and reuse it for the second house in the next step.

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

Begin by creating a new struct called House below the ContentView struct. It should look like this:

struct House: View {
    var body: some View {
        
        
    }
}

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.

Step 3: Refactor the View

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

1. Command-click (right-click) House, then choose Refactor → Extract to File.
2. In the extracted House custom view, create properties for the values that will differ between houses: image name, house name, animal, traits, and background color.
3. Return to ContentView and create two instances of your House custom view. For each one, pass in the appropriate values for the properties you created to display both houses.

struct ContentView: View {
    var body: some View {
        VStack {
            House(crest: "hufflepuff", house: "Hufflepuff", animal: "Badger", traits: "Fairness, Hard Working, Loyalty", bgColor: Color(.sRGB, red: 241/255, green: 204/255, blue: 96/255))
        }
    }
}

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

House	Animal	Traits	RGB Color
Gryffindor	Lion	Courage, Bravery, Determination	150, 51, 56
Hufflepuff	Badger	Fairness, Hard Work, Loyalty	241, 204, 96
Ravenclaw	Eagle	Wisdom, Creativity, Curiosity	41, 50, 101
Slytherin	Serpent	Ambition, Cunning, Resourcefulness	27, 117, 71