rss-css-selectors

Task description

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

Key skills:

• TypeScript
• Modules
• Webpack
• Eslint

Tech stack

• TypeScript
• HTML
• SASS
• Webpack

Features

• 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