The purpose of MooTools is not simply to bring syntactic sugar to JavaScript development but also to make you better at JavaScript. Often in forums and on Stack Overflow, the question will arise; "how do I do [insert UI widget] with [insert popular library]".

The problem with these kinds of questions is that they often speak of the over-dependence on a certain framework (such as MooTools or jQuery) without a proper understanding of how JavaScript works or how to structure code well.

It is with this in mind that we want to set some challenges in plain old JavaScript (which are probably good programming challenges for any language) that will flex your grey matter.

This week's challenge is to find an elegant solution to generating elements in a spiral pattern. Consider the following diagram...

Your solution can be procedural or recursive, but in either case you will be dealing with a shrinking grid of possible locations for elements. The colours do not have to be in the result - they are only used to indicate the pattern.

Hint: Try defining variables for columns and rows so that the shape can change but the positioning and order remain the same.

Try also to minimize your use of any one particular set of libraries or modules, but rather use as much vanilla JavaScript in your solution as possible.

Post your solutions in the form of links to jsfiddle, tinker or jsbin (in the comment section) and we’ll update this post with a link to a review post detailing solutions that we think tackle the problem in ways worthy of mention.

We hope to make it a weekly thing, so be on the lookout for more challenges to follow!

EDIT [2012/08/01]: We are closing comments and reviewing submissions. We will follow this post up with a review of our favourites and what they teach us about the task and JavaScript development in general.

EDIT [2012/08/08]: We have posted the review post to for these submissions.

comments powered byDisqus