June 10, 2017 04:26 · Jun 10, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<div id="colorbars"></div>
diff --git a/script.babel b/script.babel
@@ -0,0 +1,58 @@
+const bgcolors = [
+  [
+    '#0000cc',
+    '#0000ff',
+    '#0066ff',
+    '#3399ff',
+    '#66ccff'
+  ],
+  [
+    '#800000',
+    '#ff0000',
+    '#ff6600',
+    '#ff751a',
+    '#ff8533'    
+  ],
+  [
+    '#003300',
+    '#006600',
+    '#009900',
+    '#00cc00',
+    '#00ff00'
+  ]
+];
+
+const createElem = (elemName) => {
+    return document.createElement(elemName);
+};
+
+const createColumn = () => {
+  return createElem('span');
+};
+
+const createRow = () => {
+  return createElem('div');
+}
+
+const setupRows = ({columnElement, bgColor}) => {
+  const rowElement = createRow();
+  rowElement.style.backgroundColor = bgColor;
+  rowElement.className = 'rowitem';
+  columnElement.appendChild(rowElement);
+};
+
+const setupCols = (colData) => {
+  const colorbarsDiv = document.querySelector('#colorbars');
+  const columnElement = createColumn();
+  columnElement.className = 'colitem';
+  colorbarsDiv.appendChild(columnElement);
+  _.forEach(colData, (bgColor) => {
+    setupRows({ columnElement, bgColor });
+  });
+};
+
+const setupGrid = () => {
+  _.forEach(bgcolors, setupCols);
+};
+
+setupGrid();
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,19 @@
+#colorbars {
+  margin-top: 1%;
+  margin-left: 5%;
+  width: 600px;
+  height: 250px;
+  display: flex;
+  flex-direction: row;
+}
+
+.colitem {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-left: 5%;
+}
+
+.rowitem {
+  flex-grow: 1;
+}
diff --git a/xrzbgq.markdown b/xrzbgq.markdown
@@ -0,0 +1,7 @@
+xrZBGQ
+------
+
+
+A [Pen](https://codepen.io/josgraha/pen/xrZBGQ) by [Joe Graham](http://codepen.io/josgraha) on [CodePen](http://codepen.io/).
+
+[License](https://codepen.io/josgraha/pen/xrZBGQ/license).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
No results found