30:[] 2e:{"title":"Pixel Doodle","cells":[{"id":0,"value":"md`# Pixel Doodle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"html`Click a square to color it. Pick pen color with picker below (use eyedropper to get same color back). Change image dimensions via inputs below. Reload page or change dimensions to start over. (Suggestion: make image with border on, then turn off before saving.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"table = {\n //let tbl = html`

`\n //yield tbl;\n let tbltxt = \"\"\n for(let i = 0; i\"\n for(let j = 0; j \"\n }\n tbltxt +=\"\"\n }\n yield html`${tbltxt}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof color = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof rows = Text({label: \"Rows\", placeholder: \"Enter number of rows\", value: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof cols\n = Text({label: \"Cols\", placeholder: \"Enter number of cols\", value: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof border = Toggle({label: \"Grid Border\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"{\n let fs = html`

Click to make grid go full screen. Nice for big grids.

`\n yield fs;\n fs.querySelector(\"button\").addEventListener(\"click\", ()=>{\n document.querySelector(\".grid\").requestFullscreen()\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"html`Rendered image below. Hit \"Update Image\" to save current state. Right click to save as png. (Ignore TypeError. Will go away on first update.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof save = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"save,html2canvas(document.getElementsByClassName(\"grid\")[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"html`Codes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"{yield html``}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"{table.addEventListener(\"click\", (e)=>{\n console.log(\"table: \", e.target.tagName)\n if(e.target.tagName.toLowerCase() == \"td\"){\n e.target.style.backgroundColor=color\n }\n})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`--- \n## Imports`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {Text,Toggle} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"html2canvas = require(\"html2canvas\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}