Project Scaffold Form

by amindunited

HTML

<main>
  <div id="formWrap" class="card">
    <form id="filesForm" name="filesForm">
      <formgroup>
        
      </formgroup>
      
      <button id="selectAll">
        Select All
      </button>
      <button id="selectNone">
        Select None
      </button>
      <button type="submit">
        Submit
      </button>
    </form>
  </div>
</main>

JavaScript

const templates = [
	{
  	'name': '.editorconfig',
    'content': '// editor_config'
  },
	{
  	'name': 'lint',
    'content': '// linter'
  }
];

document.querySelector('#selectAll').addEventListener('click', (e) => {
  e.preventDefault();
  e.stopImmediatePropagation();
  const checkboxes = [...filesForm.querySelectorAll('input[type="checkbox"]')];
  checkboxes.map((checkbox) => {
    checkbox.setAttribute('checked', true);
  });
});
document.querySelector('#selectNone').addEventListener('click', (e) => {
  e.preventDefault();
  e.stopImmediatePropagation();
  const checkboxes = [...filesForm.querySelectorAll('input[type="checkbox"]')];
  checkboxes.map((checkbox) => {
    checkbox.removeAttribute('checked');
  });
});

const createForm = (() => {
  const element  = document.getElementById('filesForm'); // assuming ul exists
  const fragment = document.createDocumentFragment();
  
  element.addEventListener('submit', (e) => {
  	e.preventDefault();
    e.stopImmediatePropagation();
    const inputs = [...document.querySelectorAll('form input:checked')];
    console.log('input ', inputs);
    inputs.map((input) => {
    	console.log('input.value', templates[input.value].name, templates[input.value].content);
      
      
    });
  });

  templates.forEach((template, index) => {
      const group = document.createElement('formgroup');
      group.innerHTML = `
      	<div>
					<input
          	name="${template.name}"
            id="${template.name}"
            type="checkbox"
            value="${index}"/>
        	<label for="${template.name}">
          	${template.name}
					</label>
				</div>
      `
      fragment.appendChild(group);
      
  });

  element.appendChild(fragment);
})();