This course will be retired on July 21, 2017.
Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Front Matter Challenge Solution2:17 with Guil Hernandez
The previous video challenged you to add a second, third, or fourth set of search filters to the filter panel. In this video, you'll learn one way of doing this.
- Add more views to the Trekker app using different components like accordions, tabs, and block lists
- Make the "Add Trails" form a modal popup instead of a separate view
- Customize the Sass to enhance the design of the app
- Build a new prototype for an app idea you might have
So how'd it go?
Were you able to render a new list of filter items using front matter variables,
the ng-repeat directive, and a template tag?
Even if you created some parts, that's still great.
So now I'm gonna show you one way of doing this.
So inside the results.html partial, I added a new variable
called length and I added five values for lengths.
So we have any length, zero to five miles, five to ten miles, ten to 20 and 20 plus.
Then in the filterresults.html partial file,
I added the length heading as content for
the h4, then I gave the list item an ng-repeat directive,
where I said repeat in every length in vars.lengths.
Then, like I did earlier with the activity values,
I used angler template tags to display each length here and the label.
And as the id and for values.
So now when we go back and take a look at the filter results panel,
we're able to see the new list of length Filter items.
So the trekker app prototype is complete.
Now you can upload your build directory to a server and
show the world your awesome new prototype.
As you've learned in this course, using a framework like Foundation For
Apps, can help you build a working model of your app idea quickly,
without having to spend a lot of time on the HTML, CSS, Java script, of the design.
So the methods I covered should give you new ideas for using Foundation for
Apps as an interactive prototyping tool.
And to practice what you've learned in this course, you can add more views to
the Trekker app using different components like accordions, tabs, and block lists.
You can also make the Add Trails form in a little pop-up, instead of a separate view.
You can customize the Sass to enhance the design of the app or
build a new prototype for an app idea you might have.
Remember, the Treehouse community is always here to help.
So if you have questions about anything covered in this course,
feel free to reach out to the Treehouse staff, other students, or
you can get a hold of me on Twitter.
You need to sign up for Treehouse in order to download course files.Sign up