The Monkeys

Technical Compatibility Test

Front End Development

Timeframe: It should take about 2 hours.

[1] Make a new git repo and check it into GitHub

[2] Make the repo public.

From now on, commit frequently and write meaningful commit messages.

[3] Using HTML5Boilerplate and Compass, make a simple index page that has a form in it, based on the image above.

  • Responsive layout - fluid with one break point
  • The ACTION of the form should be the page itself
  • The METHOD of the form should be GET
  • The form should have these fields:

First name * (text field)

Surname * (text field)

Email address * (text field)

Daytime contact number * (text field)

Address * (text field)

Suburb * (text field)

State * (select with options: "ACT","NSW","NT","QLD","SA","TAS","VIC","WA")

Postcode * (text field)

Enquiry type * (select list with options: "General enquiry","Product feedback or enquiry","Product complaint")

Product name (text field)

Product size (text field)

Use-by date (text field)

Batch code (text field)

Enquiry (textarea)

  • Make all fields marked above with "*" required using only the HTML5 "required" attribute

NOTE: You don't have to do anything with the submitted form data.

[4] Using javascript, but without using JQuery, add validation to ensure that, if the enquiry type is "Product Complaint", product name, product size, use-by date and batch code are not empty.

[5] Implement MonkeyTestJS (http://monkeytestjs.io/), and write the following three tests for the HTML page you have created, ensuring that they pass in the latest up to date version of Chrome for Mac OS X:

  1. All html validates using the W3C validator
  2. The form cannot be submitted if any of the required fields are empty
  3. The form cannot be submitted if the enquiry type is "Product complaint" and any of the following fields are empty: product name, product size, use-by date or batch code.

[6] Push all work to GitHub and provide the URL of the repo on GitHub and send the URL to developers@themonkeys.com.au. Feel free to include some comments.

Thanks very much for considering this test and for your interest in working with The Monkeys. It's is pretty involved, but if you can do it you'll definitely get an interview. If you do come and work for us, you'll be able to hit the ground running.

Finally, don't be daunted. We have a friendly team of developers in here. If you have any problems with MonkeyTestJS or any other part of this test, please feel free to get in touch - developers@themonkeys.com.au. We'll be happy to help you past any potholes you might be stuck in. At the very least we'll be able to point you in the right direction.

Comment Stream