Details

  1. You are creating a UI where people can split “pills”
  2. There will be a vertical and horizontal line following the user’s cursor. Let’s call them “split lines”
  3. A pill is simply a box (a div) that has rounded corners.
  4. Users will be able to draw pills by clicking and dragging from any empty part of the page.
  5. Each pill should have a random color assigned to it.
  6. The minimum size of a pill would be 40px x 40px
  7. The border radius of each pill should be 20px
  8. When a user single clicks on any part of the page, all pills that intersect the “split lines” will split along that split line.
  9. After a pill has been split the parts of the pill will retain their original corner radius.
  10. Each pill or part of a pill can be moved via dragging
  11. Each part of a pill can be further divided by splitting again by single clicking.
  12. The minimum size of a part of a pill should be 20px x 20px
  13. Each part of a pill should retain the original pill’s color.
  14. If a certain part of a pill is already too small to be split, just move the part to either side of the split line.
  15. Pill should have a think border so that it is easy to tell the parts apart from each other after a pill is split.

(Common) Rules

  1. Don’t make change to the package.json file provided int he starter code.
  2. Don’t use an extra libraries from npm.
  3. Don’t use SVG or Canvas; prefer to keep it only React to render HTML and CSS/Tailwind

Evaluate Yourself