Skip to content

Popup Quiz App

Kobi Hari edited this page Nov 9, 2019 · 16 revisions

Popup Quiz App

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

Commits

# 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

Version Information

Node 12.11.0
Npm 6.11.3
Angular CLI 8.3.12
RxJS 6.4.0
Angular Material 8.2.3
Clone this wiki locally