Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

JAVASCRIPT STORAGE / CHAPTER 06 / Learn / LESSON 11

Expense App.

About 5–10 minutes

Project. We combine everything into a small expense app that remembers:

1. load(): getItem → parse in try/catch → shape guard; on damage show "load-error", do not overwrite. 2. render(): a list of "Title: amount" and a total "Total: N". 3. Add: read the fields, normalize (trim, Number), add a record with a stable id (max + 1), save() inside try/catch. 4. Status: "save-failed" on error — never a false "Saved". 5. Start: load(), render().

The host adds records, then reloads the page with the same storage and runs your code again — the list must come back from labStorage. So the start (load + render) is mandatory.

Record keys in exact order: id, title, amount. Do not store passwords or tokens in browser storage.

Common mistake: rendering only after an add; loading without a guard; the total not being recomputed after a reload.

Your lesson

Build an expense app that saves (labStorage key "expenses", records { id, title, amount } in this order).
- Start: load (null → []), parse in try/catch and a shape guard; on damage #status = "load-error" and do NOT overwrite.
- Render: li "<title>: <amount>" in #list and "Total: <sum>" in #total.
- Submit: trim + Number, id = max + 1, write in try/catch; on failure #status = "save-failed" and do not show the record. (Not graded, but a good habit.)
The host adds Rent 500 and Food 120, then reloads the page with the same storage and runs your code — #list and #total must be restored.

Use only window.labStorage (NOT localStorage): getItem / setItem / removeItem, string values only. Never store passwords or tokens.

HTML (exactly this fixture):
<form id="f"><input id="title" name="title" type="text"><input id="amount" name="amount" type="text"><button type="submit">Add</button></form><ul id="list"></ul><p id="total">Total: 0</p><p id="status"></p>

The host does this after Run (in order):
1. setValue #title = "Rent"
2. setValue #amount = "500"
3. submit #f
4. setValue #title = "Food"
5. setValue #amount = "120"
6. submit #f

After those steps the host reloads the page with the same labStorage and runs your code again — the DOM must show what was saved.

<form id="f"><input id="title" name="title" type="text"><input id="amount" name="amount" type="text"><button type="submit">Add</button></form><ul id="list"></ul><p id="total">Total: 0</p><p id="status"></p>

Lab storage: Isolated adapter (not the site localStorage). API: getItem/setItem/removeItem/clear — keys and values are strings; missing key → null. Do not store passwords or tokens.

Capstone: load, guard, render, honest save, and restore.

lesson_11.jsJAVASCRIPT · PAGE

Loading the runtime… The first launch may take a little longer.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

labStorage now

(empty)

Press Run — HTML loads in a sandbox iframe; Stop removes the iframe (also kills infinite loops).

01#list is "Rent: 500Food: 120" after the reload

02#total is "Total: 620"

03expenses holds records with ids 1 and 2

ConsoleWrite the code. Bring it online.

›

Progress in Profile →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

Loading…

JAVASCRIPT LABKALKULATORI.BG

<form id="f"><input id="title" name="title" type="text"><input id="amount" name="amount" type="text"><button type="submit">Add</button></form><ul id="list"></ul><p id="total">Total: 0</p><p id="status"></p>