What's the principle inside this js tree?

Question

http://jsbin.com/idala

How is it implemented?

Answer 1

Javascript making use of x, y coordinates, arrays and bit of css. You got to analyze it closely to get an idea of how it works. Of course you should have good understanding of javascript. :)

Answer 2

The creator used javascript prototype feature (not the popular Prototype framework) to create a Christmas Tree class named chrisTree.

There are methods implemented to perform the 'drawing' of the tree as well as the animation by:
- dynamically creating DOM elements to represent the trees
- manipulation of css styles
- using setTimeout method for animation effect triggering
- etc etc...

Nice work!

Answer 3

1. Creating div elements which are absolutely positioned so that it appears as a tree.

2. Settimeout used to light up divs

3. Colors are stored in an array

You can view the code using the following link and understand what is being done

http://jsbin.com/idala/edit