JavaScript Challenge #1 (Wait, weekly?)
Written By Christopher Pitt, on Wednesday, July 25th 2012, 5:06amThe 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.
July 25th, 2012 at 6:57 am
This is my solution: http://jsfiddle.net/QXsvw/5/
July 25th, 2012 at 7:02 am
Here’s mine: http://jsfiddle.net/sixtyseconds/LDE8N/ :)
July 25th, 2012 at 7:10 am
Should it be table or divs with absolute position or floating elements?
July 25th, 2012 at 7:16 am
Senyai: Either approach will work. The important thing is how you get the pattern to work… :)
July 25th, 2012 at 8:45 am
And my solution: http://jsfiddle.net/timwienk/RQZ7H/
July 25th, 2012 at 11:14 am
http://jsfiddle.net/mS3gA/7/
July 25th, 2012 at 11:17 am
My solution http://jsbin.com/axasan/edit
July 25th, 2012 at 12:34 pm
OK, I’m gonna be late for work… here’s mine:
http://jsfiddle.net/KXfWK/1/
July 25th, 2012 at 1:03 pm
My (twisted) solution : http://jsfiddle.net/G5RuR/
July 25th, 2012 at 1:13 pm
Mine: http://jsfiddle.net/SSJLq/
July 25th, 2012 at 3:49 pm
Mine with table: http://jsfiddle.net/5jTSW/
July 25th, 2012 at 3:50 pm
My 29-line solution, now with 100% more CSS3! http://jsfiddle.net/PRWvu/
July 25th, 2012 at 4:09 pm
I made a slight adjustment to mine:
http://jsfiddle.net/KXfWK/2/
It now inserts the elements so that document order matches the div number. This would illustrate a scenario where you would want a screen reader user to encounter the text in numerically increasing order, to make the content logically understandable. So if you read it in VoiceOver, the numbers should still be read in increasing order despite their twisted appearance.
July 25th, 2012 at 4:34 pm
[snip] Mine: http://jsfiddle.net/BNs9z/
July 25th, 2012 at 4:55 pm
Same algorithm, different reveal animation: http://jsfiddle.net/PRWvu/2/
July 25th, 2012 at 5:03 pm
Some excellent solutions here, keep them coming! :)
July 25th, 2012 at 5:05 pm
CoffeeScript + Canvas: http://jsfiddle.net/THrr6/
July 25th, 2012 at 5:11 pm
CoffeeScript + Canvas: http://jsfiddle.net/THrr6/1/ (leftover fixed)
July 25th, 2012 at 5:51 pm
My second version: https://tinker.io/024e3/4
July 25th, 2012 at 6:18 pm
http://jsfiddle.net/walkingeyerobot/bSc8q/
css3 transforms seem cool. so does tail recursion.
July 25th, 2012 at 6:42 pm
Second version, with visual rendering of the spiral instead of coordinates only. http://jsfiddle.net/3AHk6/
July 25th, 2012 at 11:31 pm
Not sure if I lose points for using jQuery:
http://jsfiddle.net/tq6Zf/ http://jsfiddle.net/tq6Zf/embedded/result/
Compact and full of JavaScript goodness!
July 26th, 2012 at 2:13 am
That’s it http://jsfiddle.net/t2gFk/2/. Hmm. I get
Duplicate comment detected; it looks as though you’ve already said that!and I do not see my comment :(July 26th, 2012 at 6:10 am
http://jsfiddle.net/braml/U7VRR/
i tried to do it with a single loop without absolute positioning but in the end i cheated a bit by also using a recursive function though…
July 26th, 2012 at 9:16 am
Toke me a while, and here it is: https://tinker.io/97a85
July 26th, 2012 at 10:05 am
And here is the short version: https://tinker.io/8cc5d
July 26th, 2012 at 10:18 am
and here is my solution :-) http://jsfiddle.net/bladicito/MaYNv/
July 26th, 2012 at 11:47 am
Pfff, you’re all newbies (except for Arian, he is a step torward greatness), you can’t compete with my 100% vanilla js solution.
Just be warned, is targeted to awesome browser only (the one supporting document.querySelectorAll and linear gradient… easy workaround-able, but I just don’t want to show off :P) and also you need to turn your audio on, otherwise it will not work as expected.
http://jsfiddle.net/kentaromiura/KtPw5/2/
Ps. I doubt anyone could take my comment seriously, but I want to stress that I’m just joking, every solution posted until now are great, and I’m really proud to see all this fun and effort from the community. Thank you all ;)
July 26th, 2012 at 12:15 pm
http://jsfiddle.net/walkingeyerobot/bSc8q/13/
Now with 100% more animation! Now you can see that without the transforms, it’s really just a bunch of divs all in a neat little line.
July 26th, 2012 at 2:16 pm
This is an Excellent post, thank you all for posting your solution.
July 27th, 2012 at 3:15 am
http://jsfiddle.net/a3Mgn/
Just for fun!
July 27th, 2012 at 3:48 am
@Wijnand de Ridder: use
setTimeout(algoritme, 30)instead ofsetTimeout("algoritme()",30);(see mdn)July 27th, 2012 at 9:41 am
Thanks…
changed it: http://jsfiddle.net/Wijnand/E5huP/
Thanks/Bedankt!
July 28th, 2012 at 8:44 am
My very simple one(recursive, with colors) : http://jsfiddle.net/EsHDt/5/
July 28th, 2012 at 1:13 pm
Here’s my take on this: http://jsfiddle.net/gnclmorais/d3vrd/ As requested, 100% vanilla JavaScript.
Bonus: spiral pattern also works starting downward, not also rightward.
July 28th, 2012 at 1:17 pm
A new versión: https://tinker.io/08ab1 (mod from https://tinker.io/8cc5d)
July 30th, 2012 at 10:07 pm
Heavily documented: http://jsfiddle.net/fauxparse/6UnLf/
July 31st, 2012 at 9:11 am
Hi, MT Team.
Here is my ‘vanilla JavaScript’ solution: http://jsfiddle.net/Dimcho/d6FAF/
BR