This assignment is meant to emulate a day’s work as an AI Developer Platform Engineer here at Polarr. Expect some tasks to be very trivial, while others a bit more challenging and open-ended. Feel free to stack-overflow, Google, and research any questions/issues you have. You are also welcome to use any programming language. The only thing we ask is that this work is done independently by you without the help of your family/friends. Recommended Time Limit: 5 hours (you should not spent more time than this, but if you do, that's okay as well)

When you have completed the assignment, please name the file in accordance with this naming pattern: [YOUR FULL NAME]-Assignment for [NAME OF THE ROLE THE ASSIGNMENT IS FOR] and upload it to **this dropbox.**

Question 1: React JS component (< 30 minutes)

  1. Watch the video https://streamable.com/ulyfr , observe that for all tap and drag events, there is a blue dot ripple showing the event action.
  2. Write a ReactJS component that replicates the touch / drag ripple for Touch as well as Pointer events (meaning it should work both on mobile and desktop devices). Such component should be able to used directly by any ReactJS project. Demonstrate the component as well as how to behave on a webpage. You only need to make it work in the latest version of Chrome Desktop. Safari support is a bonus.

Question 2: CSS programming (< 45 minutes)

  1. Observe a legal document formatted in HTML and CSS on this page https://i.imgur.com/Dhl8OwP.png, not that the HTML relies on li and ol elements to automatically print the section, sub section, sub section inside sub section on the page. Create the CSS markup that represents the level of indentation from the document. Test your CSS and make sure if works in the same way as the screenshot above shows.
  2. After you successfully created indentation, add a slider to the page to dynamically adjust the indentation width among section / sub section / sub section in a consistent way. The indentation should be the same at different depths of the sections.
  3. Imagine the viewer of this page had a really large screen and prefer to see the content in multiple columns. Use flex boxes and CSS rules to make the content into 2 columns when the browser width is bigger than 960px, and into 3 columns when the browser width bigger than 1440px, so on and so forth, up to 20 columns when the browser width is bigger than than 9600px.

Question 3: Javascript and HTML Canvas programming (< 60 minutes)

  1. Observe the simple watch faces animated on http://bwang29.github.io/offshore/personaltime/ , create a similar watch face but with added minute/hour ticks (choose your own style.)
  2. Notice there are aliasing issues with the hand needle movement in the link provided in part 1, find a way to remove the aliasing issue.
  3. Make a slider to select the timezone of the watch so that the watch face reacts to the timezone setting in realtime.

Question 4: Simple Neural Networks (1.5 hours)