Pimp my rect ( ͡° ͜ʖ ͡°)
a simple JS app for xfive.co
Here’s what it should look like:
- The app should consist of 3 parts/sections: Editor, Output, Gallery. Editor should live-update the Output. It’s up to you if you show Gallery on the same page or under e.g. localhost:xxxx/gallery. What’s crucial: the gallery’s state persists after the browser restarts. To obtain this goal, you’re allowed to use any technology you feel comfortable with (i.e. WS + IndexedDB, Firebase, Node+MongoDB, LocalStorage).
- Output: simple rectangular
- Editor: it should have a set of inputs to adjust Output’s:
- background colour (colour picker)
- size (input which you think is the most suitable here)
- border radius (please use a range picker)
- A save button
- Gallery: a list of saved Output divs with preserved styling. It should be possible to:
- remove Outputs from the list
- [optional but very welcome] some animations or sorting/filtering options
- It should work well in the newest browsers (mobile Chrome and Safari included!).
- All third party dependencies (if there will be any) should be installed using either NPM or Bower.
- The whole thing should be split into modules (preferably with CommonJS or ES6 syntax but AMD is also fine).
- The layout is up to you! Feel free to use tools such as http://getbootstrap.com/ or https://www.muicss.com/. In case you’d like to roll your own CSS you’re more than welcome to do so.
Project deadline: Take your time but try to deliver it within 2 weeks time. If we don't see any activity in your test repository after 2 weeks (at least initial commits), we will automatically withdraw your application.