# Array of Colors explainer

The aim of this puzzle: Use array indexing to draw two boxes of different colors.

Walkthrough of the solution: The code view starts with:

``````var arrayOfColors = [
'red',
'blue',
'green',
'pink',
'white',
'black',
'purple'
]
drawBox(arrayOfColors[0])
``````

This will draw a box with the color of the first item in the `arrayOfColors` array. In array indexing, 0 references the first item in the array. In `arrayOfColors` that item is `'red'`, so a red box is drawn.

To complete this puzzle, tap below `drawBox(arrayOfColors[0])` to bring up the keyboard. Then tap on the `drawBox()` key, and tap on the `arrayOfColors` key. To reference a specific color in `arrayOfColors`, tap to select `arrayOfColors` then tap on the `◂ []` key. Finally, tap on the `num` key and enter any number between 1 and 6.

Sample code solution:
(Tap below to reveal)

``````var arrayOfColors = [
'red',
'blue',
'green',
'pink',
'white',
'black',
'purple'
]
drawBox(arrayOfColors[0])
drawBox(arrayOfColors[1])
``````

JavaScript Concepts: Calling Functions, Data Structures (Arrays), Identifiers, Variable Declaration, Strings, Array Indexing
Grasshopper Concepts: drawBox()

I was having issues with selecting the cursor between the arrayOfColors and [. I could not complete this one correctly.

You actually don’t want to select between the `arrayOfColors` and the `[`, but instead the blank (or number) between the `[__]`. We have had some reports of trouble selecting the index number, so we’ll look for a way to fix this.

–Frankie

I figured out there was an orange [ ] that I was selecting. The real one that needed to be selected was purple. Ty for the quick reply.