2b:null 2c:["$","title",null,{"children":"🍃 Helpers | Jakob Listabarth | Observable"}] 31:[] 2f:{"id":"85dc677b160fa289","slug":null,"title":"🍃 Helpers","thumbnail":"d34316c290ef2648e6e7460b388dbae9ae78417ab4409d88621a537972af83cb","access_level":"public","create_time":"$D2022-10-02T07:26:39.941Z","update_time":"$D2022-11-24T10:54:09.596Z","view_time":null,"first_public_time":"$D2022-10-02T12:05:16.081Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"012b0b3e382a554e","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/9729178963e994d34cfa91cdd1320563920ead897b5f1934136a47a96b83bd9d","tier":"starter_2024","bio":""},"version":263,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"46e29826d3649e64","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/a0e873c9f95e3800e63d3dcbbf26fd397ec65968ac816531408eda0ff84da48f","tier":null,"bio":""}],"members":[{"type":"individual","id":"46e29826d3649e64","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/a0e873c9f95e3800e63d3dcbbf26fd397ec65968ac816531408eda0ff84da48f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2595286f07541029","slug":"nature-of-code-noc","title":"🍃 Nature of Code","owner":{"id":"012b0b3e382a554e","login":"jakoblistabarth","name":"Jakob Listabarth"}},"type":"notebook","body":{"titling":"auto","title":"🍃 Helpers","cells":[{"id":0,"value":"# 🍃 Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## Exercise Component\nUsed to embed task descriptions into notebooks. Inspired from https://observablehq.com/@d3/example-components#howto","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"task(\n \"1.1\",\n `Create a random walker that has a tendency to move down and to the right.`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"task(\n 1.1,\n `Create a random walker that has a tendency to move down and to the right.`,\n \"true\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function task(number, description, done = false) {\n const background = done ? \"#fbfbfb\" : \"hsl(320, 100%, 98%)\";\n const icon = done ? \"✅\" : \"📍\";\n return htl.html`\n ${helpersCss}\n

${icon} Exercise ${number}

\n ${description}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"## TodoList Component\nTo save ToDos for later. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"todoList([\n { name: \"add rainbow 🌈 \", status: \"pending\" },\n { name: \"add more items 📝 \", status: \"pending\" },\n { name: \"add magic 🪄 \", status: \"done\" }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"todoList = (items) => {\n const elems = items\n .sort((a, b) => a.status > b.status)\n .map((i) => {\n const checked = i.status === \"done\" ? \"checked\" : false;\n return htl.html`

\n \n ${i.name}\n

`;\n });\n const style = html`\n ${helpersCss}\n `;\n\n const title = elems.length > 1 ? \"ToDos\" : \"ToDo\";\n\n return html`${style}\n

${title}

\n ${elems}\n \n

\n ${md`This notebook is dedicated to the book *Nature of Code* by *Daniel Shiffman*. It is available [online](https://natureofcode.com/book/)`}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"helpersCss = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"