31:[] 2f:{"title":"Color-picker","cells":[{"id":0,"value":"md`# Color-picker`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"{\n colors;\n let basic= html`

`\n let div=html`

\n ${colors.map(c=>'

')}\n ${basic}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"{\n let input= html``\n //let heart='⇧'\n let heart='

'\n\n let div= html`

${input}${heart}

`\n div.querySelector('#keep').addEventListener('click', (event)=> {\n colors.push(color)\n mutable colors=colors\n })\n div.querySelector('#text').addEventListener('change', (event)=> {\n mutable color=event.target.value\n })\n //mutable color= viewof div\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"html`

${JSON.stringify(colors.concat([color]),null, 2)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"{\n let hue=d3Color.hsl(color).h||0\n let list=[35, 40, 45, 50, 55, 60, 65, 70, 75, 80]\n list=list.map(n=>{\n return `hsl(${hue}, 50%, ${n}%)`\n })\n let div= html`\n

\n ${list.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"moveGrey(25)","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"moveHue(d3Color.hsl(color), 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"moveHue(d3Color.hsl(color), 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"moveHue(d3Color.hsl(color), 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"//shiftHue([1.02, 1.04, 1.06, 1.08, 1.1])\nshiftHue([8,16,24,32,40])","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"moveHue(d3Color.hsl(color), 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"{\n let hsl=d3Color.hsl(color)\n let colors=[7.2,7.5,8.8, 9, 9.2, 9.4].map(n=>{\n return `hsl(${hsl.h||0}, ${10}%, ${n*10}%)`\n })\n let div= html`\n

\n ${colors.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"//shiftHue([0.98,0.96,0.94,0.92,0.9])\nshiftHue([0,-8,-16,-32,-40])","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"moveGrey(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"mutable color=\"cornflowerblue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"pin=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"function moveHue(hsl,num){\n let hue=hsl.h||0\n let ratio=(1/(num+1))+1\n let colors=[]\n for(let i=0; i\n ${colors.map(c=>'

')}\n `\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"function shiftHue(arr){\n let hsl=d3Color.hsl(color)\n let colors=arr.map(n=>{\n let h= (hsl.h||0) + n\n h = h % 360\n return `hsl(${h}, ${hsl.s*100}%, ${hsl.l*100}%)`\n })\n let div= html`\n

\n ${colors.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"function moveGrey(sat){\n{\n let hsl=d3Color.hsl(color)\n let colors=[2,3,4,5,6].map(n=>{\n return `hsl(${hsl.h||0}, ${sat}%, ${n*5}%)`\n })\n let div= html`\n

\n ${colors.map(c=>'

')}\n

`\n listenTo(div.querySelectorAll(\".color\"))\n return div\n}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"function addColor(event) {\n console.log('here', color)\n colors.push(color)\n mutable colors=colors\n event.preventDefault()\n return false\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"function listenTo(els){\n Array.from(els).forEach(el => {\n el.addEventListener('click', function(event) {\n let c = event.target.style['background-color']\n mutable color = d3Color.rgb(c).hex()\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"d3Color=require('d3-color')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"mutable colors=[]","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"fours=[1,2,3,4].map(n=>n/4*360)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"style=html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}