{"id":2935,"date":"2020-08-10T22:22:06","date_gmt":"2020-08-10T22:22:06","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=2935"},"modified":"2026-08-11T21:28:19","modified_gmt":"2026-08-11T21:28:19","slug":"homework-assignment-two","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/homework-assignment-two\/","title":{"rendered":"Homework Assignment Two"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this assignment, you&#8217;ll practice building layouts with stacks, refactoring reusable views, and passing data through variables. The theme: Harry Potter house crests. You&#8217;ll pick two houses, style an information card for each, and use SwiftUI&#8217;s refactor feature to avoid duplicating code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Begin<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Not sure which houses represent you? Take the <a href=\"https:\/\/www.wizardingworld.com\/sorting-hat\">Wizarding World sorting quiz<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2024\/08\/HPHouses.zip\">Download the house crest images<\/a>, unzip the file, and drag all four images into <code>Assets.xcassets<\/code>.<\/li>\n\n\n\n<li>You only need to build one house card first \u2014 you&#8217;ll refactor and reuse it for the second house in the next step.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Choose Your Houses<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pick the two houses that best represent you. You&#8217;ll use them throughout the rest of the assignment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Build One House Card<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Begin by creating a new struct called <code>House<\/code> below the <code>ContentView<\/code> struct. It should look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>struct House: View {\n    var body: some View {\n        \n        \n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Build a polished card for your first house only. Style it to meet all of these requirements:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Display the <strong>house crest image<\/strong> alongside the house name, animal, traits, and color values.<\/li>\n\n\n\n<li>Make each line of text a <strong>different style<\/strong> \u2014 vary the size, weight, and font to establish a clear <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/visual-hierarchy\">visual hierarchy<\/a>.<\/li>\n\n\n\n<li>Apply a <strong>background color<\/strong> that matches the house (use the RGB values in the reference table below). Add <strong>rounded corners<\/strong> with a corner radius of 10.<\/li>\n\n\n\n<li>Add <strong>at least 10 points of padding<\/strong> inside the background area.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/10\/2024\/08\/Screenshot-2024-08-11-at-9.03.07\u202fPM.png\" alt=\"Example: completed Gryffindor house card showing crest, name, animal, traits and color\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Refactor the View<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once your first card looks the way you want, refactor and use it for the second house:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Command-click (right-click) <code>House<\/code>, then choose <em>Refactor \u2192 Extract to File<\/em>.<\/li>\n\n\n\n<li>In the extracted\u00a0<code>House<\/code>\u00a0custom view, create properties for the values that will differ between houses: image name, house name, animal, traits, and background color.<\/li>\n\n\n\n<li>Return to\u00a0<code>ContentView<\/code>\u00a0and create two instances of your\u00a0<code>House<\/code>\u00a0custom view. For each one, pass in the appropriate values for the properties you created to display both houses.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>struct ContentView: View {\n    var body: some View {\n        VStack {\n            House(crest: \"hufflepuff\", house: \"Hufflepuff\", animal: \"Badger\", traits: \"Fairness, Hard Working, Loyalty\", bgColor: Color(.sRGB, red: 241\/255, green: 204\/255, blue: 96\/255))\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Style ContentView<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Link to both house cards from <code>ContentView<\/code>. Style the links to look polished \u2014 use rounded corners, matching dimensions, a background color, and descriptive labels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">House Reference<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>House<\/th><th>Animal<\/th><th>Traits<\/th><th>RGB Color<\/th><\/tr><\/thead><tbody><tr><td>Gryffindor<\/td><td>Lion<\/td><td>Courage, Bravery, Determination<\/td><td>150, 51, 56<\/td><\/tr><tr><td>Hufflepuff<\/td><td>Badger<\/td><td>Fairness, Hard Work, Loyalty<\/td><td>241, 204, 96<\/td><\/tr><tr><td>Ravenclaw<\/td><td>Eagle<\/td><td>Wisdom, Creativity, Curiosity<\/td><td>41, 50, 101<\/td><\/tr><tr><td>Slytherin<\/td><td>Serpent<\/td><td>Ambition, Cunning, Resourcefulness<\/td><td>27, 117, 71<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this assignment, you&#8217;ll practice building layouts with stacks, refactoring reusable views, and passing data through variables. The theme: Harry Potter house crests. You&#8217;ll pick two houses, style an information card for each, and use SwiftUI&#8217;s refactor feature to avoid duplicating code. Before You Begin Step 1: Choose Your Houses Pick the two houses that &hellip; <a href=\"https:\/\/nmi.cool\/appdev\/homework-assignment-two\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Homework Assignment Two<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2935","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=2935"}],"version-history":[{"count":27,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2935\/revisions"}],"predecessor-version":[{"id":4305,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2935\/revisions\/4305"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=2935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}