2e:null 2f:["$","title",null,{"children":"Exercise: Lunch calculator | Observable | Observable"}] 34:[] 32:{"id":"5e22dceefd4e226f","slug":"tutorial","title":"Exercise: Lunch calculator","thumbnail":"b0f664a72d65e5f51221e8030cc208819885dadb09b188823b1cf29371b92c47","access_level":"public","create_time":"$D2018-08-14T22:47:16.063Z","update_time":"$D2021-10-17T18:19:04.698Z","view_time":null,"first_public_time":"$D2018-08-16T22:12:35.250Z","has_unpublished_edits":null,"fork":false,"stars":91,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":267,"publish_version":267,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"26064700cb06d8b0","reply_to_id":null,"content":"With the UI change, the \">\" icon no longer exists (at least not for me, Mac, Chrome). The new UI has three dots for comments and WHITESPACE to expand.","create_time":"$D2021-01-14T02:08:19.479Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f44fea89e21f8c13","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":null}},{"id":"cf9205875e1684db","reply_to_id":"26064700cb06d8b0","content":"+1 to the above! Pin also doesn't render for me in the text.","create_time":"$D2021-03-07T06:53:24.558Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"378b08f362c5243d","login":"inwaves","name":"Andrei Alexandru","avatar_url":"https://avatars-next.observableusercontent.com/2b690a27cd8e59641a759afbdce54edb0deb6917f791d307d3499a0a435ff04c","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":175,"collection":null,"type":"notebook","body":{"title":"Exercise: Lunch calculator","cells":[{"id":0,"value":"md`# Exercise: Lunch calculator\n\n${signinNote}\n\nLet’s write your first notebook. A notebook is both readable and functional: a cross between an essay and a program. This tutorial will introduce you to the principles of writing and running code in a notebook, and it’s a great place to start if you’re just learning Observable.\n\n### Steps\n\n1. Set the title\n2. Create a cell\n3. Reference a cell\n4. Keep a cell open\n5. Use viewof to add a slider\n6. Use a block statement for calculations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"step1 = md`---\n\n## Set the title\n\nText content like this is typically written in Observable using [Markdown](https://guides.github.com/features/mastering-markdown/), and the title of a notebook is taken from its first heading. So your new notebook is titled _Untitled_. Let’s replace that with _Lunch calculator_.\n\nSelect the text, type 'Lunch calculator' and hit ${key(\n \"Shift-Enter\"\n)} to run the code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"video(\"tutorial-1/1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"step2 = md`---\n\n## Create a cell\n\nNext, let’s create a new cell and add a name and value. Click the + button below the Lunch calculator cell, and type this code:\n\n\\`\\`\\`js\nsandwiches = 10\n\\`\\`\\`\n\nObservable’s language is JavaScript, with a few changes that make it better for interactive & creative interfaces. This new cell has the name \\`sandwiches\\`, and a value of \\`10\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"video(\"tutorial-1/2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"step3 = md`---\n\n## Reference a cell\n\nLet’s say that each sandwich costs $5. We’ll compute the total cost of this lunch with a new cell called \\`total\\`.\n\nThis is a great chance to use Observable’s built-in autocompletion, so you don’t have to type the whole word 'sandwiches'. Try just trying \\`total = sa\\` and then hitting ${key(\n \"Tab\"\n)} — Observable will complete it to sandwiches for you.\n\n\\`\\`\\`js\ntotal = sandwiches * 5\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"video(\"tutorial-1/3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"step4 = md`---\n\n## Keep a cell open\n\nNotebooks are made up of cells like these, which generate output. You can see the code that produces each cell by toggling it - clicking the ${toggle} icon to its left. You might want to keep a cell open, so that everyone who reads the notebook can see the code behind it. Let’s keep the \\`total\\` cell open, so that everyone knows how that value is computed.\n\nOpen the total cell if it isn’t already open, and then click the pin icon ${pin} to keep it open.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"video(\"tutorial-1/4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"step5 = md`---\n\n## Use viewof to add a slider\n\nThis notebook calculates the cost of a certain number of sandwiches, but it’d be better if any reader could interact with it without having to change the code. Let’s make the number of sandwiches customizable by using \\`viewof\\`, an Observable feature that lets a cell expose the value of an input.\n\nReplace the \\`sandwiches\\` cell’s source with this:\n\n\\`\\`\\`js\nviewof sandwiches = html\\`\\`\n\\`\\`\\`\n\nWith this change, the \\`sandwiches\\` cell will now show a slider, and moving that slider updates the \\`total\\` value. That’s the magic of Observable’s reactive notebooks!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"video(\"tutorial-1/5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"step6 = md`---\n\n## Use a block statement for calculations\n\nSo far we’ve been using simple cells — assigning a cell name to a value or a simple calculation. What if you want to do more, like use \\`for\\` loops, \\`if\\` statements, and other JavaScript features? You can do so with a block: a cell bracketed by \\`{\\` and \\`}\\` characters.\n\nIf you want a block to return a value, you’ll have to use the \\`return\\` statement, just like you would with a JavaScript function.\n\nFor this example, let’s assume that the restaurant gives a 10% discount on orders of 51 or more sandwiches.\n\n\\`\\`\\`js\ntotal = {\n let total = sandwiches * 5;\n if (sandwiches > 50) {\n total *= 0.9;\n }\n return total;\n}\n\\`\\`\\`\n\nBlocks are like functions, but they run immediately and don’t have parameters. Just like before, when you move the slider, the value of \\`total\\` is automatically recomputed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"video(\"tutorial-1/6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`---\n\n## Review\n\n- Notebooks are made up of cells, which can have names\n- A notebook’s title is taken from its first cell\n- Most notebooks use Markdown for their text content\n- You can hit ${key(\"Shift-Enter\")} to evaluate a cell and ${key(\n \"Tab\"\n)} to autocomplete a name.\n- Clicking the ${pin} icon keeps a cell open.\n\n## Further reading\n\n- [Getting started Markdown](https://guides.github.com/features/mastering-markdown/)\n- [Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views)\n\n## Getting extra help\n\nHaving trouble with this tutorial? We’re happy to assist you: post in the [Observable user forum](https://talk.observablehq.com/) and we can help out.\n\n## In the next tutorial\n\nNext up, [we’ll learn how to make a request to an API and import cells from other notebooks. Let’s go 👉](/@observablehq/tutorial-2-dog-pictures)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"seriesNavigation(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"import {toggle, pin, video, key, signinNote, seriesNavigation} from \"6a6d6989dd6b59c6\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"