> For the complete documentation index, see [llms.txt](https://tmdarneille.gitbook.io/seirfx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tmdarneille.gitbook.io/seirfx/javascript/00interactivity/color-palette-picker.md).

# Color Palette Picker

## Using event listeners in a loop

We are going to start building a color palette picker.

## Lesson Objectives

1. Generate 150 divs (squares) each with their own random color.
2. Create a click handler on each square that will add a square with the same color as the clicked square to the right column.

## Generate 150 divs (squares) each with their own random color.

Create DOM elements:

```markup
<button id="generate">GENERATE</button>
<div id="container">
    <div id="color-palette"></div>
    <div id="my-palette"></div>
</div>
```

```css
div {
    border: 1px solid white;
}

#container {
    width: 608px;
}

#color-palette, #my-palette {
    display: inline-block;
    width: 300px; height: 500px;
    overflow: hidden;
}

.square {
    display: inline-block;
    width: 28px; height: 28px;
    cursor: pointer;
}
```

Grab them with javascript:

```javascript
const colorPalette = document.querySelector('#color-palette')
const myPalette = document.querySelector('#my-palette')
const generate = document.querySelector('#generate')
```

Write a function `makePalette` that will generate 150 squares with the class 'square' and append them to the `color-palette` div

```javascript
const makePalette = () => {
    const colorPalette = document.querySelector('#color-palette')

    for(let i=0; i<150; i++){
        const square = document.createElement('div')
        square.classList.add('square')
        colorPalette.appendChild(square)
    } 
}

document.addEventListener('DOMContentLoaded', ()=>{ 
    makePalette()
})
```

Make it so each square will have a random color

```javascript
const red = Math.floor(Math.random() * 255)
const green = Math.floor(Math.random() * 255)
const blue = Math.floor(Math.random() * 255)
const color = 'rgb('+red+','+green+','+blue+')'
square.style.backgroundColor = color
```

Should look like this:

![](https://i.imgur.com/AX50GkX.png)

Add an event listener to the `generate` button that will run the `makePalette` function

```javascript
generate.addEventListener('click', makePalette)
```

Make it so the `makePalette` function will empty the previous palette of squares

```javascript
const makePalette = () => {
    const colorPalette = document.querySelector('#color-palette')
    while (colorPalette.firstChild) {
        colorPalette.removeChild(colorPalette.firstChild);
    }
    //...
}
```

Give each square an event listener whose `addColor` handler will (eventually) add the chosen square to the right column:

```javascript
const makePalette = () => {
    //...
    square.addEventListener('click', addcolor)
}
```

* Make the `addColor` handler.
* First, it should console.log the background color of the square that was clicked:

```javascript
const addColor = (event) => {
    console.log(event.target.style.backgroundColor)

}
```

* The `addColor` function should:
  * Make a new square
  * Give it a class of 'square'
  * Give it the clicked square's background color
  * Append to the 'my palette' right div

```javascript
const addcolor = (event) => {
    const color = event.target.style.backgroundColor
    const newSquare = document.createElement('div')
    newSquare.classList.add('square')
    newSquare.style.backgroundColor = color
    document.querySelector('#my-palette').appendChild(newSquare)
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tmdarneille.gitbook.io/seirfx/javascript/00interactivity/color-palette-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.