Create a Type Ahead Form

This set of iterations for creating a Type-ahead Form with Flexbox, ES6 and Local Storage

Steps to use these iterations:

  1. Clone the project
    git clone -b [github branch] [github repository] [github branch]

  2. Install the NPM packages:
    npm install

  3. Start the app by running gulp:
    gulp

Iteration 7. Create a type-ahead form (UI Only)

Branch: site-menu-5

Design Goals:

  1. Create a search form
  2. Implement the type-ahead feature
  3. Highlight the matching text

Developer’s Notes

  • Learn the UI for a type-ahead form

Surge: http://oafish-brother.surge.sh

Iteration 8. Implement the type-ahead logic

Branch: search-form

Design Goals:

  1. Add JS regex logic in main.js
  2. Dynamically update the search results

Developer’s Notes

  1. Learn JS regex
  2. Learn how to update the search form

Surge: http://lush-plants.surge.sh

Iteration 9. Organize the JS codes into modules

Branch: search-form-2

Design Goals:

  • Reorganize the JS codes into modules

Developer’s Notes

  • Learn JavaScript modules

Surge: http://futuristic-aftermath.surge.sh

Iteration 10. Create a “my favorites” menu (UI)

Branch: my-favorites

Design Goals:

  • Create the UI for the my favorites menu

Developer’s Notes

  • Learn how to create a form with a list of checked/unchecked items

Iteration 11. Add the behavior to the “my favorites” menu

Branch: my-favorites-2

Design Goals:

  1. Implement the expected behavior to the “my favorites” menu
  2. Save the user options to the local storage

Developer’s Notes

  1. Learn how to save data to local storage
  2. Learn JS event delegation

Iteration 12. Create a “my saved favorites” component

Branch: my-favorites-3

Design Goals:

  1. Create UI component (widget) to display the saved favorites
  2. Retrieve the saved user options from local storage

Developer’s Notes

  • Learn how to read data to local storage

Iteration 13. Combine the type-ahead and my-favorites features

Branch: my-favorites-4

Design Goals:

  • Add type-ahead search capability to the my-favorites component

Developer’s Notes

  • Practice on UI and JS

Iteration 14. Tune up the saved-favorites component

Branch: my-favorites-5

Design Goals:

  • Improve the saved-favorites component

Developer’s Notes

  • Practice on UI and JS
Posted on by sfberlintokyo

Starter Kit (CSS Flexbox)

This starter kit consists of 6 iterations for creating responsive web pages with CSS3 Flexbox

Steps to use these iterations:

  1. Clone the project
    git clone -b [github branch] [github repository] [github branch]

  2. Install the NPM packages:
    npm install

  3. Start the app by running gulp:
    gulp

Iteration 1. Create a base page template

Branch: base-page

Design Goals:

  1. Create a structure with placeholders for header and footer
  2. Ensure a responsive structure
  3. Support fixed header
  4. Support fixed footer

Developer’s Notes

  • The initial template is saved as index-base.html

Iteration 2. Add header and footer to the base template

Branch: header-footer

Design Goals:

  1. Add a header section to the template
  2. Place an application logo to the top-left of the template
  3. Align the hamburger icon for the site menu to the upper-right of the template to show/hide the site menu in the mobile mode
  4. The site menu block will slide out from right in the mobile mode
  5. Add a footer section to the template

Developer’s Notes

  • The updated template is saved as index.html

Iteration 3. Construct the site menu

Branch: site-menu

Design Goals:

  1. In the mobile mode: Create a vertically stacked menu.
  2. In the desktop mode: Create a horizontal menu structure.

Developer’s Notes

  • The updated template is saved as index.html
  • Learn the SMACSS basic
  • Learn CSS flex-box basic

Iteration 4. Improve the mobile site menu

Branch: site-menu-2

Design Goals:

  1. Update the mobile menu with accordion feature, so the user can expand or collapse a menu category.

Developer’s Notes

  • The updated template is saved as index.html
  • Learn how to apply accordion with SCSS

Iteration 5. Improve “the desktop mode” site menu with animation

Branch: site-menu-3

Design Goals:

  1. Apply animation to the desktop site menu.

Developer’s Notes

  • The updated template is saved as index.html
  • Learn how to use animation in SCSS

Iteration 6. Improve site menu to support a complex menu structure

Branch: site-menu-4

Design Goals:

  1. Expand the desktop site menu with a second level structure.

Developer’s Notes

  • Learn how to create a complex site menu structure

Surge: http://wry-icicle.surge.sh/

Posted on by sfberlintokyo