Skip to main content

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#

  • Add jQuery library

Create DOM elements:

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

Grab them with jQuery:

const $colorPalette = $("#color-palette");const $myPalette = $("#my-palette");const $generate = $("#generate");

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

const makePalette = () => {  for (let i = 0; i < 150; i++) {    const $square = $("<div>");    $square.addClass("square");    $colorPalette.append($square);  }};//... bottom of filemakePalette();

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.css("background-color", color);

Should look like this:

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

$generate.on("click", makePalette);

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

const makePalette = () => { $colorPalette.empty(); //...}

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

const makePalette = () => {  //...  $(".square").on("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.currentTarget).css("background-color"));};
  • 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.currentTarget).css("background-color");
  const $square = $("<div>");  $square.addClass("square");  $square.css("background-color", color);
  $myPalette.append($square);};