Example: Tip Calculator

This example walks through building a simple tip calculator app from scratch.

Download the example spreadsheet to follow along or upload directly to NExS.

Live Demo

Try changing the Bill Amount, Tip Percentage, or Number of People to see the calculations update instantly.

What We’re Building

A restaurant tip calculator that:

Takes a bill amount and tip percentage as inputs
Calculates the tip and total
Optionally splits the bill among multiple people

Step 1: Create the Excel Spreadsheet

Open Excel and create this layout:

Sheet1 (Calculator)

	A	B
1	Tip Calculator
2
3	Bill Amount	$50.00
4	Tip Percentage	18%
5	Number of People	1
6
7	Results
8	Tip Amount	=B3*B4
9	Total	=B3+B8
10	Per Person	=B9/B5

Formatting

B3: Currency, 2 decimals
B4: Percentage, 0 decimals
B5: Number, 0 decimals
B8, B9, B10: Currency, 2 decimals
A1, A7: Bold
Optional: Add borders and background colors

Step 2: Create the NExS.app Worksheet

Create a new worksheet named exactly NExS.app:

	A	B	C
1	app	Tip Calculator
2	view	Sheet1!A1:B10
3		name	Calculator
4		editable	B3, B4, B5

Step 3: Upload and Test

Save as .xlsx
Upload to platform.nexs.com
Test by changing the bill amount and tip percentage

Step 4: Embed on Your Website

Script Embed (Recommended)

<script class="nexs"
  src="https://static.nexs.com/js/nexs_embed.js"
  data-nexs-app-url="https://platform.nexs.com/app/YOUR-APP-ID">
</script>

Custom UI with Declarative API

<!DOCTYPE html>
<html>
<head>
  <title>Tip Calculator</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 400px;
      margin: 40px auto;
      padding: 20px;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    .card {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .field {
      margin-bottom: 20px;
    }
    .field label {
      display: block;
      font-weight: 600;
      margin-bottom: 8px;
      color: #555;
    }
    .field input {
      width: 100%;
      padding: 12px;
      font-size: 18px;
      border: 2px solid #ddd;
      border-radius: 8px;
      box-sizing: border-box;
    }
    .field input:focus {
      border-color: #4a90d9;
      outline: none;
    }
    .tip-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .tip-btn {
      flex: 1;
      padding: 12px;
      font-size: 16px;
      border: 2px solid #ddd;
      border-radius: 8px;
      background: white;
      cursor: pointer;
    }
    .tip-btn:hover {
      border-color: #4a90d9;
    }
    .tip-btn.active {
      background: #4a90d9;
      color: white;
      border-color: #4a90d9;
    }
    .results {
      background: #4a90d9;
      color: white;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
    }
    .results .label {
      font-size: 14px;
      opacity: 0.9;
    }
    .results .amount {
      font-size: 36px;
      font-weight: bold;
      margin: 5px 0;
    }
    .results .detail {
      font-size: 14px;
      opacity: 0.8;
    }
  </style>
</head>
<body>

<h1>Tip Calculator</h1>

<div class="card">
  <div class="field">
    <label>Bill Amount</label>
    <input type="text"
           class="nexs__input"
           data-nexs-cell-addr="B3"
           placeholder="$0.00">
  </div>

  <div class="field">
    <label>Tip Percentage</label>
    <div class="tip-buttons">
      <button class="tip-btn" onclick="setTip(15)">15%</button>
      <button class="tip-btn active" onclick="setTip(18)">18%</button>
      <button class="tip-btn" onclick="setTip(20)">20%</button>
      <button class="tip-btn" onclick="setTip(25)">25%</button>
    </div>
  </div>

  <div class="field">
    <label>Split Between</label>
    <input type="number"
           class="nexs__input"
           data-nexs-cell-addr="B5"
           min="1"
           value="1">
  </div>

  <div class="results">
    <div class="label">Each Person Pays</div>
    <div class="amount">
      <span class="nexs__output_formatted" data-nexs-cell-addr="B10"></span>
    </div>
    <div class="detail">
      Tip: <span class="nexs__output_formatted" data-nexs-cell-addr="B8"></span>
      &nbsp;|&nbsp;
      Total: <span class="nexs__output_formatted" data-nexs-cell-addr="B9"></span>
    </div>
  </div>
</div>

<!-- NExS app (handles calculations) -->
<script class="nexs"
  src="https://static.nexs.com/js/nexs_embed.js"
  data-nexs-app-url="https://platform.nexs.com/app/YOUR-APP-ID">
</script>

<script>
  function setTip(percent) {
    NEXS.setInput("B4", percent / 100);

    // Update button styles
    document.querySelectorAll('.tip-btn').forEach(btn => {
      btn.classList.remove('active');
      if (btn.textContent === percent + '%') {
        btn.classList.add('active');
      }
    });
  }
</script>

</body>
</html>

Enhancements

Add Preset Tip Buttons

In Excel, add buttons that set common tip percentages:

	A	B
11
12	[15%]	[18%]
13	[20%]	[25%]

Cell B12 content: 15% {setInputs: ['B4', 0.15]}

Cell C12 content: 18% {setInputs: ['B4', 0.18]}

And so on.

NExS.app update:

	A	B
	editable	B3, B5
	buttons	B12:C13

Add Rounding Options

Add a checkbox to round up to the nearest dollar:

	A	B
11	Round up?	0

Formula in B10:

=IF(B11=1, CEILING(B9/B5, 1), B9/B5)

NExS.app:

	A	B	C
	editable	B3, B4, B5, B11
	input	B11	checkbox

Complete NExS.app

	A	B	C	D
1	app	Tip Calculator
2		mode	open
3	view	Sheet1!A1:B13
4		name	Calculator
5		backgroundColor	white
6		editable	B3, B4, B5
7		input	B11	checkbox
8		buttons	B12:C13

What You Learned

Creating a basic NExS app from a spreadsheet
Configuring editable cells
Using the Declarative API for custom styling
Adding buttons with setInputs action
Using checkbox inputs

Next Steps

Contact Form Example — Build a form with validation and submission
Sales Dashboard Example — Create a multi-view dashboard with charts