The simulator consists of several game levels. Each level includes an example layout and html code that corresponds to the current level. Some elements of the layout are highlighted using animation. The user's task is to write a css selector that corresponds to all selected layout elements.
![deploy screenshot pc](https://private-user-images.githubusercontent.com/44443884/272088518-1c68880d-616a-4a6e-93f1-e32e1f009648.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0MzE2NDcsIm5iZiI6MTcyNTQzMTM0NywicGF0aCI6Ii80NDQ0Mzg4NC8yNzIwODg1MTgtMWM2ODg4MGQtNjE2YS00YTZlLTkzZjEtZTMyZTFmMDA5NjQ4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDA2MjkwN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAyYTVhZjhkN2RiZGUxMThiNGI0N2E4NmJhMGI4YmNkOGIxMTcwM2UxZmEzYjc5MmE3NWM4MTYxYTdhMzBjMTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4L08kkgEk30neq40WG7xwzCwLniwbofPiCbMq7Tny3c)
![deploy screenshot mobile](https://private-user-images.githubusercontent.com/44443884/272088215-b3f11d90-1558-4048-beb4-7f73bcc48396.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0MzE2NDcsIm5iZiI6MTcyNTQzMTM0NywicGF0aCI6Ii80NDQ0Mzg4NC8yNzIwODgyMTUtYjNmMTFkOTAtMTU1OC00MDQ4LWJlYjQtN2Y3M2JjYzQ4Mzk2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDA2MjkwN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI0ZjYwZTlmMzVkNmY5Y2MxYTEwNTgwOTA0MmNlMDdhN2FkZDNlYmM2MWRlNGEwYWI0YmM3MWE0ZDIyMTQ4YjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.1tdlYPAxPUHQQ77-1UE1kWUKeNiuQ4gqSjsysQ_Uv60)
- TypeScript
- Modules
- Webpack
- Eslint
- TypeScript
- HTML
- SASS
- Webpack
- Adaptive layout
- Highlighting HTML and CSS code
- Code highlighting on hover mouse
- Checking the selector when pressing enter
- Any selectors corresponding to all selected elements are checked
- If the user has entered the correct/wrong selector, an animation is displayed
- The application has a Help button for those cases, when the user will not be able to guess the desired selector
- Displaying the progress of the level with or without a hint
- Reset progress button