Param Builder

by kthornbloom

HTML

<h1>URL Param Builder</h1>

Check all packages that you'd like to include.
<form id="param-builder">
  <div class="option">
    <label><input type="checkbox" class="option-check" data-param="reset"> Reset</label>
    <a href="#reset">Info</a>
  </div>
  <div class="option">
    <label><input type="checkbox" class="option-check" data-param="colors"> Colors</label>
    <a href="#colors">Info</a>
  </div>
  <div class="option">
    <label><input type="checkbox" class="option-check" data-param="typography"> Typography</label>
    <a href="#typography">Info</a>
  </div>
  <div class="option">
    <label><input type="checkbox" class="option-check" data-param="buttons"> Buttons</label>
    <a href="#buttons">Info</a>
  </div>
  <div class="option">
    <label><input type="checkbox" class="option-check" data-param="flex"> Flex</label>
    <a href="#flex">Info</a>
  </div>

  <input type="text" id="result">
</form>

<h1>
Documentation
</h1>

<section>
<h2 id="reset">
Reset
</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem numquam, fugiat vitae debitis aspernatur quasi repudiandae nihil placeat corporis velit quidem eaque possimus optio sunt ipsa. Commodi expedita fugiat est.
</section>

<section>
<h2 id="colors">
  Colors
</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid quo odio perferendis accusantium expedita error cumque odit, animi quisquam delectus quia, veniam aut quaerat beatae culpa. Optio labore, ducimus.
</section>

<section>
<h2 id="typography">
  Typography
</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid quo odio perferendis accusantium expedita error cumque odit, animi quisquam delectus quia, veniam aut quaerat beatae culpa. Optio labore, ducimus.
</section>

<section>
<h2 id="buttons">
  Buttons
</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid quo odio perferendis accusantium expedita error cumque odit, animi quisquam delectus quia,...

CSS

body {
  padding: 30px;
  font-family: sans-serif;
  line-height: 1.5em;
}

#param-builder {
  padding-bottom: 2em;  
}

#result {
  box-sizing: border-box;
  width: 100%;
  padding: .5em;
}

h1 {
  font-size: 2em;
  line-height: 1.2em;
}

h2 {
  font-size: 1.5em;
  line-height: 1.5em;
}

section {
padding: 1em 0;
}

JavaScript

const checkboxes = document.querySelectorAll('.option-check');
const form = document.getElementById('param-builder');
const results = document.getElementById('result');
var values = '';
      
form.addEventListener('input', function(){
	values = 'https://assets-4357jsgrea-uc.a.run.app/css/v1.css?include=';
	for (var i=0; i < checkboxes.length; i++) {
  	if (checkboxes[i].checked) {
      var val = checkboxes[i].dataset.param
      values += val + '\u0026';
    }
  }
  result.value = values;
});