avl-frontend-exam

Demo

https://avl-frontend-exam.now.sh/

Requirements

https://avancevl.github.io/recruit/sample_frontenddev.html

Features List

Numbers Entry Box

• Only numbers (0-9), period (.), and backslash (/) allowed in the numbers box.
• Right and left arrows disable for numbers box.
• Clicking disabled for numbers box.
• Keyboard is automatically in focus on the numbers box on page load. No need to click on numbers box to bring it in focus.
• “Press Enter” text and “Submit” button becomes enabled only when numbers are entered into numbers box.

Radial Chart and Stats Pane

• Pixel perfect desktop and mobile.
• Not a static image, but real chart that could update if page is connected to server side.
• * When input number, percentage circle will show up directly.

Search Filters and Dropdown Menu

• Pixel perfect desktop and mobile
• Simple Selector
• Multiple Selector
• Checkbox Selector
• * Get selected value

Main Pane and Hashtags

• Pixel perfect desktop and mobile
• Tag level controlled by props

Others

• React Hook
• Styled Components
• Theme color management

Project setup

yarn install

Compiles and hot-reloads for development

yarn start