Eyenet Designs Eyenet Designs

Home / Coding Examples

Coding Examples

These are some memorable coding tests I've run across while on the Job hunt. They show various technologies I've worked with and will hopefully serve as an example of some of the test front end developers may encounter when looking for a new job.

AngularJS / Bootstrap3

In this test, the requirements were to create three tabs. The first tab will contain a table that is filtered using a select box. The second tab is a gallery of image that when clicked appears in a modal box and the description and title must update. The third tab is a comments system. When a new comment is entered into the text box and the Add Comment button is clicked, it will appear at the top of the comments list. When the Remove Comment button is clicked, the last comment in the list will be removed.

View Page

Who Killed Kenny!

There are 3 parts to this coding test. You have 2 hours to complete as much as possible. Please read the directions for each section before starting as the objective of subsequent sections may influence how you code earlier ones. Screenshots are provided to give you an idea of what it should look like and what the behavior should be. You may use any resources you need to complete the test (ie google, stack overflow, etc)

In general, use as few lines of code as possible while maintaining semantic markup. Also keep in mind best practices for accessibility, page performance and SEO. Please comment all your code, as it will give a better idea of what you are trying to accomplish.

If a solution requires javascript, the jquery library is already linked, but feel free to use any javascript library you’re comfortable with.

Finish as much of this as you can. If you run out of time, please add comments and/or pseudo code that will give an idea of what you’re trying to accomplish.

A directory structure is provided. Images are located in the i directory. Please place your files in the appropriate locations. Create directories as needed.

Part 1

Build an image highlighter widget that uses only HTML and CSS. Mousing over an image will darken the other images and leave the moused over image bright. You are NOT allowed to use JavaScript to complete this. If you cannot find a solution using only HTML and CSS, then use Javascript. You should use the image sprite provided to display each image and they should appear in the order shown

Part 2

Add a title and some directions to the page.

Build functionality that will allow you change the sort order of the images. Clicking on an image will move it into the section below and display the images in the new sort order. You may use Javascript for this.

In figure 2a, Kenny, Cartman, Ike and Tweek have been clicked on, in that order. Clicking on Kyle will move Kyle into the lower section after Tweek.

Part 3

Add a button labeled Reset and Save. Clicking Reset will clear section displaying the newly resorted images and redisplay the images in the upper section in their original display order. No click action for Save needs to be implemented.

View Page

Markup Challenge

In this test, the requirements were to take an image and create a page that represented the image. This markup challenge also includes Bourbon Sass to demonstrate responsive design.

View Page

Code Encapsulation

This is my example of encapsulate code into a module for reuse.

View Page

Prototypal Inheritance

This is my example of Prototypal Inheritance. Prototypal inheritance in JavaScript is when one object inherited methods from another object using the prototype property.

View Page

PigLatin Converter

This is my PigLatin Converter. Criteria include...

  • Words that start with a consonant have their first letter moved to the end of the word and the letters "ay" added to the end.
  • Words that start with a vowel have the letters "way" added to the end.
  • Words that end in "way" are not modified.
  • Punctuation must remain in the same relative place from the end of the word.
  • Hyphens are treated as two words.

View Page

Simple Carousel

This is a simple carousel created in pure JavaScript

View Page

Sample App

These are sample pictures of the Web POS app I developed while working at The Gap. Once finished this will become the new Register app employees will use when working with customers. This app is response and designed to display on the IPad and IPhone

Web POS Mobile and Tablet App