Author: Anastasiya Kozlova (shvedagon@gmail.com / Telegram: @N_Kozz)
Prototype: https://flukeout.github.io/
Main goals:
- implement working game with nice tasks and design :)
- use Typescript, Eslint, Webpack, Sass and Jest
- implement main principles of OOP
- Design (+10)
- Custom tasks (+10)
- Block 1 with markup example (+10)
- Block 2 with html (+10)
- Block 3 with css input (+10)
- Block 4 with levels selector (+10)
- Current level is highlighted and saved when page is reload (+10)
- Html and CSS code is highlighted (possibly with usage of libraries) - only HTML highlighting implemented (+5/10)
- 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. (+0/10)
- 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. (+0/10)
- Users input works both on physical Enter button and on submit button on the screen. (+10)
- Any proper css selector will work (+10)
- Success and error animations are implemented. When all the levels are done a win alert comes up. When the level is done successfully game switches to next level. (+10)
- The "help" button shows right answer in the input field for css code. The code is shown with a typing effect (+10)
- Next to each level of the game, it is displayed whether it was completed or not, or the level was completed using a hint. There is a button that allows you to reset your progress and start the game over again (+10)