Published
Edited
Oct 8, 2019
Insert cell
point1 = md`# (2nd) Tutorial 1: Lunch calculator

${signinNote}

Let’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.

### Steps

1. <a href='#step1'>Set the title</a>
2. <a href='#step2'>Create a cell</a>
3. <a href='#step3'>Reference a cell</a>
4. <a href='#step4'>Keep a cell open</a>
5. <a href='#step5'>Use viewof to add a slider</a>
6. <a href='#step6'>Use a block statement for calculations</a>`
Insert cell
step1 = md`---

## Set the title

Text 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_.

Select the text, type 'Lunch calculator' and hit ${key("Shift-Enter")} to run the code.`
Insert cell
video("tutorial-1/1")
Insert cell
step2 = md`---

## Create a cell (How to write code inline or block in md)

Next, let’s create a new cell and add a name and value. Click the + button below the Lunch calculator cell, and type this code:

\`\`\`js
sandwiches = 10
\`\`\`

Observable’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\`.
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof sandwiches = html`<input type=range />`
Insert cell
total = sandwiches * 5
Insert cell
Insert cell
Insert cell
viewof sandwichesTotal = html`<input type=range />`
Insert cell
totalBlock = {
let total = sandwichesTotal * 5;
if (sandwiches > 50) {
total *= 0.9;
}
return total;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {toggle, pin, video, key, signinNote, seriesNavigation, menuSvg, code} from "@embracelife/tutorial-utilities"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more