lodashSandbox: chunk

ES6 Enabled

by David McClelland

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div class="wrapper">
  <div class="title">
    <p>
      lodash chunk
    </p>
  </div>
  <div class="workspace">
    <input id='startInput' type='text' value="a, b, c, d, e"/>
    <input id='modValInput' type='text' value="2" />
    <button id="button">Execute</button>
    <input id="output" type="text" value="output" />
  </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
}

.title {
  font-family: Helvetica;
}

.workspace {
  display: flex;
  flex-direction: column;
  width: 200px;
}

#output {
  font-family: Courier;
  font-size: 14px;
}

#startInput {
  font-family: Courier;
  font-size: 14px;
}

#modValInput {
  font-family: Courier;
  font-size: 14px;
}

Babel + JSX

// find elements
let banner = document.getElementById("#playground");
let button = document.getElementById("button");
let modValInput = document.getElementById('modValInput');
let startInput = document.getElementById('startInput');
let output = document.getElementById("output");

// handle click and add class
button.onclick = () => {
  doOperation();
}

function doOperation(value) {
let inputVal = startInput.value.split(',');
let modVal = modValInput.value || 3;
  output.value = _.chunk(inputVal, modVal)[0];
}