Write a tip calculator to dive deeper into JavaScript
1 of 8

In this guide, you will create a simple tip calculator and learn about embedding values into text. It builds on the First Steps on Observable guide.

First, let's create a range input for the bill amount. Click a button near the left edge of an existing cell to open the Add Cell menu. Then, find the Range input by either typing the first few letters of the input (which opens the search bar), or by scrolling through the list.

Clicking the Range input option will create a new cell containing some starter code. Change the name of the variable from range to amount and adjust the range of values to read [0, 200] so we can pick a bill amount between $0 and $200. It should look like this:

viewof amount = Inputs.range([0, 200],
          {label: "Amount", step: 1})