In this lesson we learn how to create a function we can use to build menus with by passing it json. We add some style to our menu and complete building it with the menuBuilder() we create. We learn how to return function results to the calling function call and how to capture those results with a variable.
Each action item has been linked to the time stamp in the lesson video to help you focus on learning rather than searching for information. Please be sure to complete each step as demonstrated in the video.
Action Items to Complete
- Complete all steps completed in the video “inside out – STEP 102 | Completing the Navigation to Our App”.
- 00:00 – Introduction
- 00:09 – overview of where we are and headed
- 02:31 – copy step-101 folder and name step-102
- 03:56 – turn on web console
- 04:38 – remove i submenu from challenges
- 06:20 – update style.css with download version
- 06:57 – overwrite style.css
- 07:14 – link style.css in the index.html file
- 07:48 – comment on style.css in index.html
- 08:47 – update id in the nav element
- 09:40 – start updating our app.js to build menu
- 10:38 – clear console.log from success function
- 15:30 – create new function and move code
- 15:42 – create the menuBuilder function
- 16:11 – move success code block to menuBuilder()
- 16:49 – call menuBuilder() from success
- 17:06 – pass data.menu object to menuBuilder()
- 17:25 – add paramater to menuBuilder()
- 17:37 – update menuBuilder vars with $obj parm
- 18:52 – adjust theMenu var in menuBuilder
- 21:17 – add code to build the sub-menus
- 22:28 – correct _li_ to capture nested menus
- 25:00 – add the menu var to the success
- 25:26 – add return statment to menuBuilder
- 25:50 – lesson review
- Push all the files you have created to your server and review that your work is error free and aligns to the completed work in the video.
- Submit the url to your application (the index.html file) once you have validated your work and are confident you have completed everything. The link should look similar to the following link: http://inside-out-html5-app.inside-out-project.com/step-102/ and your page should look to what you see when clicking on the example link.
please note: your assignment is to be submitted in the step folder as shown in the example above.