{"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-04-23T21:20:49","modified_gmt":"2026-04-23T21:20:49","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>In this assignment, you&#8217;ll practice building layouts with stacks, extracting 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 extract-view 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\"><li>Not sure which houses represent you? Take the <a href=\"https:\/\/www.wizardingworld.com\/sorting-hat\">Wizarding World sorting quiz<\/a>.<\/li>\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<li>You only need to build one house card first \u2014 you&#8217;ll extract and reuse it for the second house in the next step.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Choose Your Houses<\/h2>\n\n\n\n<p>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>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\"><li>Display the <strong>house crest image<\/strong> alongside the house name, animal, traits, and color values.<\/li>\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<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<li>Add <strong>at least 10 points of padding<\/strong> inside the background area.<\/li><\/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: Extract the View<\/h2>\n\n\n\n<p>Once your first card looks the way you want, extract and reuse it for the second house:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Command-click the outer <code>VStack<\/code> that contains your card, then choose <strong>Extract View<\/strong>. In Xcode 16+, use <em>Refactor \u2192 Extract Selection to File<\/em> instead.<\/li>\n<li>Create variables in the extracted struct for values that differ between houses: image name, house name, animal, traits, and background color.<\/li>\n<li>Use the extracted view to display your <strong>second house<\/strong>, passing its own values to each variable.<\/li><\/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.05.46\u202fPM.png\" alt=\"Code snippet: calling the extracted HouseCard view with variables\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Style ContentView<\/h2>\n\n\n\n<p>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<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>","protected":false},"excerpt":{"rendered":"<p>In this assignment, you&#8217;ll practice building layouts with stacks, extracting 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 extract-view 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":22,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2935\/revisions"}],"predecessor-version":[{"id":4271,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2935\/revisions\/4271"}],"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}]}}