Color Select and Deselect

Toggle class name on click in jQuery

by MD Hasan Patwary

HTML

<div class="selected-color-list d-flex gap-3 flex-wrap border-bottom mb-3 pb-3"></div>
<hr>
<div class="color-list d-flex flex-wrap column-gap-4 row-gap-3 align-items-center" id="colorList"></div>

CSS

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.column-gap-4 { column-gap: 1rem; } /* Adjust the gap as needed */
.row-gap-3 { row-gap: 0.75rem; } /* Adjust the gap as needed */
.align-items-center { align-items: center; }
.gap-2 { gap: 0.5rem; } /* Adjust the gap as needed */
.cursor-pointer { cursor: pointer; }
.user-select-none { user-select: none; }
.circle__color { width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.fs-12 { font-size: 12px; }
.gap-3 { gap: 16px; }
.circle__color {
    border: 2px solid #ddd;
    outline: 1px solid #ddd;
    background-color: var(--bg);
    transition: all 200ms ease-in-out;
}
.color_checkbox:checked ~ .circle__color {
    outline-color: red;
    border-color: #fff;
}

.color_checkbox:checked ~ .circle__color svg {
    transform: scale(1);
}

.circle__color svg {
    transform: scale(0);
    transition: all 200ms ease-in-out;
}

JavaScript

const colors = [];
  for (let i = 1; i <= 100; i++) {
    colors.push({
      id: i,
      code: `#${Math.floor(Math.random()*16777215).toString(16)}`,
      name: `Color ${i}`
    });
  }

  const colorList = document.getElementById('colorList');
  let colorHTML = '';

  colors.forEach(color => {
    colorHTML += `
      <label class="d-flex flex-wrap gap-2 align-items-center cursor-pointer user-select-none" for="color-input-${color.id}">
        <input type="checkbox" value="${color.code}" id="color-input-${color.id}" name="colors[]" class="color_checkbox" hidden>
        <span class="circle__color circle" style="--bg: ${color.code}; background-color: ${color.code}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg></span>
        <span class="fs-12 color_name">${color.name}</span>
      </label>
    `;
  });

  colorList.innerHTML = colorHTML;
  
  
  $(document).ready(function() {
    $('.color_checkbox').on('change', function() {
      const colorId = $(this).attr('id');
      const colorLabel = $(`label[for="${colorId}"]`);
      const colorName = colorLabel.find('.color_name').text();
      const colorCode = $(this).val();
      const selectedColor = `
                    <div class="d-flex flex-wrap gap-2 align-items-center cursor-pointer user-select-none bg-3 px-2 py-1 rounded-pill" data-id="${colorId}">
                        <span class="circle__color circle" style="--bg: ${colorCode}"><i class="fi fi-rr-check"></i></span>
                        <span class="fs-12 color_name">${colorName}</span>
                        <button type="button" class="bg-transparent border-0 p-0"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8...