Ckeck balls dynamic columns

by Plippie Plop

HTML

<div class="valueGrid-container" id="Plip" data-valueGrid-max-amount="10">
	  <div class="valueGrid-header"></div>
	  <div class="valueGrid-items-container"></div>
	  <div class="valueGrid-numbers"></div>
	</div>

CSS

:root {
  --valueGrid-max-cols: auto-fit; /* auto-fit, auto-fill OR fixed number */
  --valueGrid-padding: 0.5em;
  --valueGrid-grid-gap: 0.5em;
  --valueGrid-item-size: 44px;
  --valueGrid-border-radius: 0.3em;
  --valueGrid-border-color: rgb(200, 200, 200);
  --valueGrid-item-text-color: rgb(40, 40, 40);
  --valueGrid-item-text-color-active: rgb(255, 255, 255);
  --valueGrid-item-bg-color: rgb(200, 200, 200);
  --valueGrid-item-bg-color-active: rgb(250, 50, 250);
}

html {
  font-family: 'Roboto', sans-serif;
}

.valueGrid-container {
  display: flex;
  flex-direction: column;
  width: auto;
  flex:0;
  border: 1px solid var(--valueGrid-border-color);
  border-radius: var(--valueGrid-border-radius);
  padding: var(--valueGrid-padding);
  margin: auto;
}

.valueGrid-container .lotto-header,
.valueGrid-container .valueGrid-numbers {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: var(--valueGrid-padding);
  border: 1px solid var(--valueGrid-border-color);
  border-radius: var(--valueGrid-border-radius);
  min-height: 50px;
  margin-bottom:var(--valueGrid-padding);
  max-width: calc(100% - var(--valueGrid-padding)*2);
}

.valueGrid-container .valueGrid-items-container {
  align-items:center;
  display:grid; 
  grid-gap: var(--valueGrid-grid-gap);
  border: 1px solid var(--valueGrid-border-color); 
  padding: var(--valueGrid-padding);
  border-radius: var(--valueGrid-border-radius);
  margin-bottom: var(--valueGrid-padding);
 grid-template-columns: repeat(var(--valueGrid-max-cols),minmax(var(--valueGrid-item-size), var(--valueGrid-item-size)));
}

@media screen and (max-width: 414px){
  
  .valueGrid-container .valueGrid-items-container {
    grid-template-columns: repeat(auto-fit, minmax(var(--valueGrid-item-size), var(--valueGrid-item-size)));
    }
  
}

.valueGrid-container >  div:last-child{
  margin-bottom:0;
}


.valueGrid-items-container input[type=checkbox] {
  display: none;
}

.valueGrid-items-container...

JavaScript

const valueGrid = {
  maxAmount: 5,
  totalItems: 45,
  container: 'Plip',
  checkboxName: 'valueGrid-check',
  data: [],
}



valueGrid.init = function() {

  if (typeof valueGrid.container !== 'object' && valueGrid.container) {

    if (document.getElementById(valueGrid.container)) {
      valueGrid.container = document.getElementById(valueGrid.container)

    } else if (document.querySelector(valueGrid.container)) {

      valueGrid.container = document.querySelector(valueGrid.container)
    } else {
      console.warn('[valueGrid] No valueGrid container found');
      return false;
    }

  }
  
  console.log(valueGrid.container.dataset);

  if (valueGrid.container.dataset.valueGridRows) {
    valueGrid.rows = valueGrid.container.dataset.valueGridRows;
  }
  if (valueGrid.container.dataset.lottoCols) {
    valueGrid.cols = valueGrid.container.dataset.valueGridoCols;
  }
  if (valueGrid.container.dataset.valuegridMaxAmount) {
    valueGrid.maxAmount = valueGrid.container.dataset.valuegridMaxAmount;
  }
  
  if(valueGrid.maxAmount && valueGrid.container.querySelector('.valueGrid-header')){
  console.log(valueGrid.container.querySelector('.valueGrid-header'));
   valueGrid.container.querySelector('.valueGrid-header').textContent = 'Select '+valueGrid.maxAmount+' items.';
  
  }

  //do checkbox array mockup
  valueGrid.generateArray();
  //bindings:
  valueGrid.bindings();

};


valueGrid.generateArray = function() {

  const itemCont = valueGrid.container.querySelector('.valueGrid-items-container'); 
  let cbCollection = "";
  const fragment = document.createDocumentFragment();
 

  for (let i = 1; i <= valueGrid.totalItems; i++) {

    let label = document.createElement("label");
    let cb = document.createElement('input');

    label.setAttribute('for', 'valueGrid-check-' + i);
    label.textContent = i;
    cb.setAttribute('type', 'checkbox');
    cb.id = 'valueGrid-check-' + i;
    cb.name = valueGrid.checkboxName + '[]';
    cb.value = i;

   ...