//MAKE: 3.06S Skill-builder: Make a rainbow


Saving your work

Use Save as... to save the empty template as "3.06S-MakeARainbow-LastName.html" in your Computer Programming 12 directory.

The assignment

Use arrays and for...in loops to create rainbow.

For example

Behold! The magical power of light!

Or change it up into a series of <span>s

Behold! The other, very similar power of light!

Or stagger the <span>s using style="position: relative; top: ???px;"

Behold! An awesome staircase of light!


  1. Create a <div> with id="outputID" in the body of your code
  2. Create a button that will trigger mainProcedure()
  3. Initialize your rainbow array
  4. Create an output function that will insert a result into outputID
  5. Create a process function that uses for...in loops to create a list
  6. Use inline styles to add the background colour: <li style='background-color: red;'></li>
  7. Create a mainProcedure function that will pass the rainbow array to your process function, and then pass the results to your output function
  8. Reread //PROCESS: for loops for more info