# Pinegrow Challenge --- Color the Boxes

**URL:** <https://forum.pinegrow.com/t/pinegrow-challenge-color-the-boxes/1284>\
**Category:** Styling (CSS)\
**Created:** [September 20, 2017, 3:18pm UTC](https://forum.pinegrow.com/t/pinegrow-challenge-color-the-boxes/1284 "2017-09-20T15:18:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [September 20, 2017, 3:18pm UTC](https://forum.pinegrow.com/t/pinegrow-challenge-color-the-boxes/1284/1 "2017-09-20T15:18:43Z")

</div>

## **Pinegrow Challenge — Color the Boxes**

> **[Color the Boxes | Pinegrow Web Editor](https://pinegrow.com/blog/color-the-boxes/)**
>
> The Pinegrow Challenge: take any tool you like – including coding by hand – and try to be faster than Pinegrow at using classes to style a bunch of boxes.

> - Take any tool you like – including coding by hand
> - Do it in a proper HTML way
> - With Pinegrow we do that in 1 minute

🤔 Hmmm…

This was **less than a minute** to write:

```
<script type="text/javascript">
    function colorBoxes() {
        var e = document.getElementsByClassName("box");
        for (var i = 0, l = e.length; i < l; i++) {
            e[i].style["background-color"] = e[i].innerHTML;
        }
    }
    window.addEventListener('load', colorBoxes);
</script>

```

😜 Does it count? Do I win something?

It would take longer than a minute - to write the creation, appending of styles via JS to a sheet.

* * *

Do we need to add a “Challenges” forum section? Might be fun.