Summary
Erwin Penland contracted me to create an advanced search function for their food items. The search should allow the user to enter anything from the menu item title, ingredient, meal time, or category. It should allow for multiple inputs and also should have search suggestions.
Additionally, the page should contain a section that allows users to click on predetermined filter items that would act similarly to the search function. Once the user clicks on the items, the most relevant items should surface to the top with similar items below.
Lastly, the job also required a nutritional calculator function to be done on the food item page. The nutrition calculator would initially display the nutritional information for the food item. If there are add-on items or side items, their nutritional information would be added to the nutritional sum once the user selected them.
Technically speaking, both sections would be done using AngularJS. The basic HTML would be given to me to build on. The data would be fed in from the backend using an API from a 3rd party company. It was my responsibility to create the JSON specs for the Back End developers to feed the data through to my specific sections.
Specs
Objectives
- Use data in JSON format
- Render results and populate page using AngularJS
- Display search suggestions as the user types in search field
- View search results by "infinite scrolling"
- Searchable by food ingredients, entrée name, meal time, or prep style
- Filter menu items by dish, ingredient, prep style, taste, nutrition
-Calculate nutrition information from entrée and side items
Components
- API
- AngularJS
- HTML
- JavaScript
- GitHub Repo
- Grunt Setup
