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:

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

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:

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

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

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:

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

generate.addEventListener('click', makePalette)

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

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:

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

• Make the addColor handler.

• First, it should console.log the background color of the square that was clicked:

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

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)
}