Hex Color Table Printer

by Santiago J

HTML

<p><small>Paste colors below and click "show". If you make changes, remember to copy them to a local file; this site will <b>not</b> remember or save your input.</small></p>
<textarea id="input" rows="8">
#f00 #0f0 #00f
#fa0 #af0 #0af
#f0a #a0f #0fa
</textarea>
<button id="save" type="button">Show</button>
<div id="output"></div>

CSS

p {
    font-family: sans-serif;
}

#input {
    display: block;
    width: 100%;
}

#output {
    color: #fff;
    font-family: "Monaco","Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    font-size: 0.75rem;
    text-shadow: 1px 1px 1px #000;
}

#output td {
    padding: 0.5rem;
}

CoffeeScript

saveButton = document.querySelector("#save")
inputEl = document.querySelector("#input")
outputEl = document.querySelector("#output")

generateTable = ->
    lines = inputEl.value.split("\n")
    colors = lines.map((line) -> line.trim().split(/[^#\w]+/))
    colors.reduce((table,row) ->
        rowEl = row.reduce((row, color) ->
            colorEl = document.createElement("td")
            colorEl.textContent = color;
            colorEl.style.backgroundColor = color;
            row.appendChild(colorEl)
            row
        , document.createElement("tr"))
        table.appendChild(rowEl)
        table
    , document.createElement("table"))

generateAndInsertTable = ->
    table = generateTable()
    if outputEl.firstElementChild
        outputEl.replaceChild table, outputEl.firstElementChild
    else
        outputEl.appendChild table

saveButton.addEventListener "click", generateAndInsertTable

generateAndInsertTable()