//MAKE: 3.07 Skill-builder: Make a rainbow

Resources

Saving your work

Use Save as... to save the empty template as "3.07S-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!


Hints

  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>
    Note: Using Javascript to create code with inline styles is being seen as increasingly amateurish. It is OK to use inline styles in generated code for the meantime. But ask yourself how you can add a class instead - or even better - how to create an element and then add .style.backgroundColor to it.
  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