- Game, where you can learn css selectors with fun!
- TS (strict)
- Webpack
- ESlint (air-bnb)
- SCSS (semantic layout, adaptive, CSS GRID, FLEXBOX)
- CSS Animations
- Jest
- CodeMirror / highlightJS - syntax highlighting lib's
SPA DOM Api Animations
-
In the code input, the user can type and send for verification a css selector that matches all selected layout elements. You can send the code for verification either by clicking on the Enter button in the window for entering the code, or by pressing the Enter key on the keyboard
-
For correct and incorrect answers, an appropriate animation is provided
-
If the answer is correct, the user goes to the next level of the game, or a notification of victory/incompleted levels is displayed if the level is the last one
-
The application has a Help button for those cases when the user cannot guess the desired selector. Clicking on the Help button displays the desired selector in the window for entering the code. The selector is displayed in the block for entering the code with the effect of printing text (smooth appearance of text by letter)
-
In the block with the list of game levels, it is possible to go to a certain level by clicking on its number. Next to each level, it is displayed whether it was completed or not, or the level was completed using a hint. The current level is highlighted. When you restart the application opens at the same level. There is a button that allows you to reset your progress and start the game over again
-
When you hover over a line in a block with code, the element corresponding to this line in the block with an example of layout is highlighted. The html code is displayed next to the element.
-
When you hover over an element in the layout block, the corresponding fragment in the code block is highlighted. The html code is displayed next to the element.
-
Any selectors that match all selected elements are checked