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. In your work, feel free
to use our style guide https://www.flocabulary.com/tools/ui-style-guide/ but you are not
bound to it. You can alter or remove any static text. Usage of modern CSS features like transition
, animation
and flex-box
is encouraged. This exercise may require you to use some git
, but you are not being
judged on your use of it.
If you have Node.js installed on your computer, or foresee no problem getting it installed, follow these directions (otherwise scroll down):
- install Node.js https://nodejs.org/en/download/
- Fork this repo https://help.github.com/articles/fork-a-repo/
- Clone forked repo to local folder
- In same directory as
package.json
, runnpm install
- To start development server, run
npm start
. Navigate to http://localhost:8000/webpack-dev-server - Add/change CSS in
styles/App.css
. If you would like to use a preprocessor, create a new file instyles/
with the suffix of your choice and require it inMain.js
- Alter markup in
Main.js
,MadlibForm.js
andSubmittedMadlib.js
in thecomponents/
folder. We use React'sjsx
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 - 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
- Fork this repo https://help.github.com/articles/fork-a-repo/
- Clone forked repo to local folder
- Run
git checkout gh-pages
- Prepare styles in new file
styles/App.css
and link it inindex.html
. - Push updated gh-pages branch to github
or
- Download
gh-pages
branch as zip file https://github.com/flocabulary/madlibs-ui-challenge/archive/gh-pages.zip - Prepare styles in new file
styles/App.css
and link it inindex.html
. - Submit your work as a .zip file in an email.
Unfortunately this option means using CSS only.