-
Notifications
You must be signed in to change notification settings - Fork 1
Popup Quiz App
Kobi Hari edited this page Nov 9, 2019
·
16 revisions
In this project we will demostrate the following:
- Material Design
- Adding Material Design to the project
- Defining A Custom Theme and some CSS Variables to be consumed in our components
- How to manage the application layout using CSS Grid and Flex
- NgRx
- Adding NgRx Store to the project
- Defining the main state
- Defining the possible actions
- Defining the reducers
- Defining Selectors for various aspects of the state
- Consuming the state in the components
# | Link | Description |
---|---|---|
1 | Initial application | Created an empty application using the angular CLI: ng new redux-pop-quiz
|
2 | Added Material Design | Added angular material using the cli: ng add @angular/material
|
3 | Custom Theme | Defined the theme palettes in partial _common.scss and generated the material styles in styles.scss
|
4 | Tested theme | Used some angular material components like icon and button to test the new theme |
5 | Grid, Flex layout | Created layout where each element is either grid or flex for easier layout management |
6 | CSS Variables | Added CSS Variables to the styles.scss file and tested some of them in the app component |
7 | Toolbar | Added material toolbar with logo and caption |
8 | Progress Component | Added progress component, that presents a list of indicators telling which questions were answered correctly, incorrectly or not at all |
9 | Question Component | Added question presenter component, that presents a question, a list of answers, and allow the user to pick one |
Node | 12.11.0 |
Npm | 6.11.3 |
Angular CLI | 8.3.12 |
RxJS | 6.4.0 |
Angular Material | 8.2.3 |