bangrrrt / madlibs-ui-challenge Goto Github PK

At Flocabulary, we strive to provide rich educational materials that are also elegant, intuitive web interfaces. In this challenge you'll help create a hypothetical feature that's very similar to mad libs ( https://en.wikipedia.org/wiki/Mad_Libs ). It won't be highly educational, but with your help, it'll at least have a good UI.

Here's a live hosted demo of this functionality: https://flocabulary.github.io/madlibs-ui-challenge/

It's functional, but it clearly needs some styling and finessing. A Flocabulary designer has provided a set of mocks for how the feature should look and feel. Those mocks can be seen here: https://drive.google.com/drive/folders/1Sq946n18SD2QJTdwRXPp8Tfq_Uvrr2Zh?usp=sharing

1. Visually make the feature match the mocks. Where elements change size or color, care should be taken to smoothly transition by usage of CSS features like transition, animation. The mocks may leave some details out, and here's where you have a chance to show your ingenuity.

2. You'll see that there are a couple fields (number and word ending in -ly) which could use a little more validation. For the number field, ensure that a number is provided. For the field word ending in -ly, ensure that the provided value does indeed end with the letters ly.

0. install Node.js https://nodejs.org/en/download/
1. Fork this repo https://help.github.com/articles/fork-a-repo/
2. Clone forked repo to local folder
3. In same directory as package.json, run npm install
4. To start development server, run npm start
5. To submit your challenge push your updates to your forked repo

This was made with create react app.