/madlibs-ui-challenge

Primary LanguageJavaScript

Thank you for accepting Flocabulary's Front End Engineer challenge!

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 . Your task is to 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.

If you have Node.js installed on your computer, or foresee no problem getting it installed, follow these directions (otherwise scroll down):

  1. install Node.js https://nodejs.org/en/download/
  2. Fork this repo https://help.github.com/articles/fork-a-repo/
  3. Clone forked repo to local folder
  4. In same directory as package.json, run npm install
  5. To start development server, run npm start. Navigate to http://localhost:8000/webpack-dev-server
  6. Add/change CSS in styles/App.css. If you would like to use a preprocessor, create a new file in styles/ with the suffix of your choice and require it in Main.js
  7. Alter markup in Main.js, MadlibForm.js and SubmittedMadlib.js in the components/ folder. We use React's jsx syntax to generate HTML. It can generally by altered like HTML, with some differences that are noted in comments. More info: https://facebook.github.io/react/docs/jsx-in-depth.html
  8. To submit your challenge push your updates to your forked repo

This is definitely the preferred option. Please feel free to reach out if you have any questions at all about getting this up and running. I'm happy spending a little time on the phone if necessary

If you cannot install Node.js (the lo-fi option)

  1. Fork this repo https://help.github.com/articles/fork-a-repo/
  2. Clone forked repo to local folder
  3. Run git checkout gh-pages
  4. Prepare styles in new file styles/App.css and link it in index.html.
  5. Push updated gh-pages branch to github

or

  1. Download gh-pages branch as zip file https://github.com/flocabulary/madlibs-ui-challenge/archive/gh-pages.zip
  2. Prepare styles in new file styles/App.css and link it in index.html.
  3. Submit your work as a .zip file in an email.

Unfortunately this option means using CSS only.