Challenge Overview
Welcome to the Topcoder challenge. You may implement this task and submit your solution until the deadline. Reviewers would score it and 3 people with higher scores (not less than minimal) would get the prizes. Learn "How to compete" and read the task below.
Context
Project Context
Topcoder Community App is the main Topcoder website that you see, for example, when you are searching for challenges https://www.topcoder.com/challenges.
Challenge Context
Currently, the calendar interface on the challenge listings page is not user friendly, see screenshot. We'd like to update the calendar UI so that it is easier for members to input dates without having to click through the calendar.
Expected Outcome
New UI for the calendar is implemented according to the new design. And supported entering date from the keyword.
Challenge Details
Technology Stack
-
React
-
SCSS
Code access
The work for this challenge has to be done in one repository:
- Community App repo https://github.com/topcoder-platform/community-app branch `feature/datepicker-update` commit `12adaecd72774539d013014b4cb3ce3f6deaa2f9` or later.
- For local setup, please follow the README with Node 8 or 10. CONTENTFUL environment variables are provided on the forum.
Individual requirements
On the challenge listing page we have a filter by date which is using a calendar widget see screenshot and link to the live page.
-
We would like to update the calendar UI according to the next new design:
- Desktop handoff: https://marvelapp.com/prototype/f70187e/screen/73550299/handoff
- Tablet handoff: https://marvelapp.com/prototype/ba511cg/screen/73550331/handoff
- Mobile handoff: https://marvelapp.com/prototype/9440hbh/screen/73550357/handoff
- Source file: https://drive.google.com/drive/folders/1kcUbIpo5i0LExa_kfSSuyt1io8JBAeSc?usp=sharing -
The existent behaviour of the calendar should stay. In particular:
- When we choose the first date, we should be able to choose the second date immediately, and after calendar is closed.
- We shouldn't be able to select the second date before the first date or first date after the second date.
- Calendar should be accessible using the keyword. We should be able to choose any date using keys <Tab>/<Shift>+<Tab>/<Enter>/Arrows as it's implemented in the current calendar, see video.
- Inside month and year dropdown you may use standard browser scrollbar, don't have to implement a custom one.
- Calendar should be shown under the date field we currently choosing.
-
We should also be able to enter dates from the keyword directly to the inputs using the input mask, see screenshot. It should automatically move the cursor during input, allow us to put the cursor in any place, and allow using keyboard arrows to navigate between digits, something like in this demo (don't use jQuery, this example is only for demo).
- We should open calendar when we click on the calendar icon only, when we click on the field we can enter date from the keyboard. -
You may use existent libraries or implement code from scratch. See which third-party code is allowed to use.
General requirements
-
Follow the best practices established in the repository.
-
Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS.
-
Properly use babel-plugin-react-css-modules and / or react-css-themr for styling.
-
Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;
-
Do not break existing unit tests.
Scorecard Aid
-
This challenge would be scored using the Basic Code Challenge 0.0.5 scorecard.
-
The major requirement here are:
- UI match the design
- Input mask work similar to demo
- Input mask and calendar are accessible using keyword
Small issues in the implementations may be treated as minor issues.
If you have any questions or concerns, feel free to raise a question on the forum.
Final Submission Guidelines
Submit a zip file which would include:
-
Git patch with changes you’ve made to the code in our repository.