CSS Frameworks

• Learning Outcomes
• Resources
• Lab
• Assignment

Learning Outcomes

• use a CSS framework in an application

Resources

• Bootstrap Documentation
  • Bootstrap Grid System
  • Bootstrap Forms
  • Bootstrap Form Validation
• Sample React/Feathers/Bootstrap App
• slides

Lab

Assignment

1. Fork; remove the fork relationship; make private; and clone this project: https://gitlab.com/langarabrian/bootstrap4
2. In bootstrap4/frontend run yarn install.
3. Run PORT=8080 yarn start.
4. In frontend/src/Patients.tsx create a data collection form with the following required fields:
   • first name
   • last name
   • email address
   • country
   • province/state
   • postal/zip code
   • lowest systolic blood pressure in last year
   • highest systolic blood pressure in last year
5. Use the Bootstrap classes to create a sensible responsive layout for the input fields. There should be at least 3 different arrangements depending on the viewport width.
6. Choose the most restrictive input field type that makes sense for each field.
7. Implement “country” as a “SELECT” element where there are two choices: “Canada” and “USA”.
8. Implement “province/state” as a “SELECT” element where the choices depend on the current selection for “country”.
9. Implement “postal/zip code” validation that is dependent on the current selection for “country”. You should support Canadian postal codes and US ZIP codes in the basic 5-digit format as well as the ZIP+4 format.
10. Ensure that lowest blood pressure entered is lower than the highest blood pressure entered.
11. Do as much validation as possible on the client side. Display meaningful error messages. Short-circuit the form submission if any of the fields are invalid.
12. When you are ready to move to the backend, stop PORT=8080 yarn start and run yarn build to build the frontend.
13. In bootstrap4/backend run yarn install.
14. On the backend, validate all the input in the “before create” hook and throw an error if any of the input fields are invalid.
15. Also, on the backend, throw an error if someone tries to register with an email address that has already been registered.
16. Catch any server side errors on the client side and present a meaningful message to the user in the UI.
17. Stage, commit, and push all changes to the project.