lodashSandbox: differenceBy

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">
    <h3>
      _.differenceBy
    </h3>
  </div>
  <div class="subtitle">
    <h4>
      2 arrays into 1
    </h4>
  </div>
  <div class="workspace">
    <input id='input1' type='text' value="[1,2,3,4,5,6]" />
    <br />
    <select id="modValInput">
      <option value='_FLOOR' default='true'>floor</option>
      <option value='_CEILING'>ceiling</option>
      <option value='_ROUND'>round</option>
    </select>
    <br />
    <input id='input2' type='text' value="[1.1,2.0,6.9]" />
    <br />
    <button id="button">Execute</button>
    <br />
    <input id="output" type="text" value="output" />
  </div>
</div>

CSS

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

.title, .subtitle {
  font-family: Helvetica;
  color: gray;
}

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

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

#input1, #input2 {
  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 firstArray = document.getElementById('input1');
let secondArray = document.getElementById('input2');
let output = document.getElementById("output");

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

function doOperation() {
first = JSON.parse(firstArray.value);
second = JSON.parse(secondArray.value);
modValName = modValInput.value;
switch (modValName) {
	case '_FLOOR' :
  modVal = Math.floor;
  break;
case '_CEILING' :
modVal = Math.ceiling;
break;
case '_ROUND' :
modVal = Math.round;
break;
}
  output.value = _.differenceBy(first, second, modVal);
}