Skip to content

Instantly share code, notes, and snippets.

@josgraha

josgraha/index.html

Forked from anonymous/index.html
Last active June 10, 2017 04:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save josgraha/77663c52e2c5ee3bfb097475a35c75e2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save josgraha/77663c52e2c5ee3bfb097475a35c75e2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. josgraha revised this gist Jun 10, 2017. No changes.
  2. @invalid-email-address Anonymous created this gist Jun 10, 2017.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div id="colorbars"></div>
    58 changes: 58 additions & 0 deletions script.babel
    View file
    Original file line number Diff line number Diff line change
    @@ -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();
    1 change: 1 addition & 0 deletions scripts
    View file
    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>
    19 changes: 19 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -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;
    }
    7 changes: 7 additions & 0 deletions xrzbgq.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -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).