2e:null 2f:["$","title",null,{"children":"Random Recursive HTML | Andrew Wooldridge | Observable"}] 34:[] 32:{"id":"43f2b25a2fc1c579","slug":"random-recursive-html","title":"Random Recursive HTML","thumbnail":"26556e58042a08faad7384cf01323a22003351cf55fe66fb3ed3a020fecd1f3e","access_level":"public","create_time":"$D2021-03-06T17:32:02.790Z","update_time":"$D2021-03-18T06:07:11.061Z","view_time":null,"first_public_time":"$D2021-03-06T17:57:38.717Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":98,"publish_version":98,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"847ab67f4d77320c","slug":"31-days-of-observable","title":"31 Days of Observable","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"Random Recursive HTML","cells":[{"id":0,"value":"md`# Random Recursive HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`Input the HTML you want to use. Choose the level of recursion (more like iteration). Hit \"run.\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"view = html`\n

\n\n\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof clicks = Button(\"Run\", {value: null, reduce: ()=>{ renderHTML(recurse)}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof el1 = Text({label: \"Element 1\", placeholder: \"Enter some HTML\", value: \"

Hello World!

\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof el2 = Text({label: \"Element 2\", placeholder: \"Enter some HTML\", value: \"

Cell One

Cell Two

\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof el3 = Text({label: \"Element 3\", placeholder: \"Enter some HTML\", value: \"

Item One
Item Two
Item Three

\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof recurse = Range([0, 20], {value: 5, label: \"Recurse Max Level\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"renderHTML = (rec)=>{\n\n \n let getRandomChildNode = (el)=> {\n console.log(\"getRandomChildNode el:\", el)\n let returnEl = null;\n if(el.children.length > 0 ){\n return getRandomChildNode(el.children[Math.floor(Math.random() * el.children.length)])\n } else {\n returnEl = el\n }\n \n return returnEl;\n }\n let nodeList = [\n html`${el1}`,\n html`${el2}`,\n html`${el3}`\n ]\n let getRandomNodeToAppend = ()=>{\n return nodeList[Math.floor(Math.random()*nodeList.length)]\n }\n \n view.innerHTML = \"\";\n \n for(let i = 0; i< recurse; i++){\n getRandomChildNode(view).appendChild(getRandomNodeToAppend().cloneNode(true))\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"style=html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {Text, Range, Button} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`Random Hex color from https://observablehq.com/@bengarvey/random-hex-color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"