Ckeck balls

by Plippie Plop

HTML

<div class="lotto-container" id="lottoPlip" data-lotto-rows="8" data-lotto-cols="6" data-lotto-max-amount="6">  
  <div class="lotto-header"></div>
  <div class="lotto-items-container"></div>
  <div class="lotto-numbers"></div>
				
		
	</div>

CSS

:root {
  --lotto-cols: 5;
  /*defaults iif no data attribute is set*/
  --lotto-rows: 10;
  /*defaults iif no data attribute is set*/
  --lotto-border-color: rgb(100, 100, 100);
  --lotto-item-text-color: rgb(40, 40, 40);
  --lotto-item-text-color-active: rgb(255, 255, 255);
  --lotto-item-bg-color: rgb(200, 200, 200);
  --lotto-item-bg-color-active: rgb(250, 50, 250);
}

html {
  font-family: roboto;
}

.lotto-container {
  display: flex;
  flex-direction: column;
  width: auto;
  border: 1px solid var(--lotto-border-color);
  border-radius: 0.25em;
  padding: 0.5em;
}

.lotto-container .lotto-items-container {
  display: inline-grid;
  margin: auto;
  grid-template-rows: repeat(var(--lotto-rows), 50px);
  grid-template-columns: repeat(var(--lotto-cols), minmax(50px, 50px));
  grid-gap: 0.5rem;
  padding: 0.5em;
  border: 1px solid var(--lotto-border-color);
}


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

.lotto-items-container label,
.lotto-numbers label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  color: var(--lotto-item-text-color);
  background-color: var(--lotto-item-bg-color);
  cursor: pointer;
  border-radius: 0.2rem;
}

.lotto-items-container input[type=checkox]:checked+label,
.lotto-items-container input.active+label {
  background-color: var(--lotto-item-bg-color-active);
  color: var(--lotto-item-text-color-active);
}

.lotto-container .lotto-numbers {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid var(--lotto-border-color);
  border-radius: 0.25em;
  padding: 0.5em;
  align-items: center;
  justify-content:center;
}

.lotto-numbers label {
  flex: 0 0 auto;
  background-color: var(--lotto-item-bg-color-active);
  color: var(--lotto-item-text-color-active);
  width: 44px;
  height: 44px;
  font-weight:600;
  margin-right:0.25em;

}

JavaScript

const lottoMod = {
  maxAmount: 5,
  cols: 5,
  rows: 9,
  container: 'lottoPlip',
  checkboxName: 'lotto-check',
  data: [],
}



lottoMod.init = function() {

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

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

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

      lottoMod.container = document.querySelector(lottoMod.container)
    } else {
      console.warn('lottoModule] No lotto container found');
      return false;
    }

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

  if (lottoMod.container.dataset.lottoRows) {
    lottoMod.rows = lottoMod.container.dataset.lottoRows;
  }
  if (lottoMod.container.dataset.lottoCols) {
    lottoMod.cols = lottoMod.container.dataset.lottoCols;
  }
  if (lottoMod.container.dataset.lottoMaxAmount) {
    lottoMod.maxAmount = lottoMod.container.dataset.lottoMaxAmount;
  }
  
  if(lottoMod.maxAmount && lottoMod.container.querySelector('.lotto-header')){
   lottoMod.container.querySelect('.loto-header').textContent = 'Select '+lottoMod.maxAmount+' items.';
  
  }

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

};


lottoMod.generateArray = function() {

  const itemCont = lottoMod.container.querySelector('.lotto-items-container');
  let total = lottoMod.rows * lottoMod.cols;
  let cbCollection = "";
  const fragment = document.createDocumentFragment();

  itemCont.style.setProperty('--lotto-rows', lottoMod.rows);
  itemCont.style.setProperty('--lotto-cols', lottoMod.cols);

  for (let i = 1; i <= total; i++) {

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

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

   ...