31:[] 2f:{"title":"Random Recursive HTML","cells":[{"id":0,"value":"md`# Random Recursive HTML`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"view = html`\n

\n\n\n\n\n

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

Hello World!

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

Cell One

Cell Two

\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"viewof recurse = Range([0, 20], {value: 5, label: \"Recurse Max Level\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":11,"value":"style=html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {Text, Range, Button} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`Random Hex color from https://observablehq.com/@bengarvey/random-hex-color`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}