JSFiddle - React, Tailwind, and code Playground

by Don Johnson

JavaScript

export const invulElementenMaken = function () {   
const body = document.body;  
 
const createLegend = function (name) {     
 const createLegendElement = document.createElement("legend");            
   createLegendElement.innerText = name;    
 return createLegendElement;   
};

const createLabel = function (name) {
  const createLabelElement = document.createElement("label");
    createLabelElement.innerHTML = name;
  return createLabelElement;
};

const createInput = function (name, inputLength) {
    let inputElem = [];
    for (let input = 0; input < inputLength; input++) {
      const inputEl = document.createElement("input");
      inputEl.type = "checkbox";
      inputEl.name = `${name}_${input + 1}`;
      inputEl.id = input + 1;

      inputElem.push(inputEl);
      // const label = createLabel(`Kaart_${input + 1}`);
      // inputEl.insertAdjacentElement("afterend", label);
    }
    return inputElem;
  };

  console.log("test", createInput("weddenschap", 3));

  const kleur = ["rood", "geel", "groen", "blauw", "wit"];
  kleur.forEach(function (key, index) {
    const createDiv = document.createElement("div");
    const createTitle = document.createElement("h2");
    const createForm = document.createElement("form");

    createTitle.textContent = key;
    createDiv.appendChild(createTitle);

    createForm.appendChild(createLegend("Kaarten"));
    // createForm.appendChild(createInput("kaart", 8));
    // createForm.appendChild(createLabel(`Kaart ${index + 1}`));

    createForm.appendChild(createLegend("Weddenschap"));
    // createForm.appendChild(createInput("weddenschap", 3));

    createDiv.appendChild(createForm);

    // Add a class
    createDiv.classList.add(key);

    //make the color div
    body.appendChild(createDiv);
  });
};