The DOM and an interactive transaction form

Intermediate~35 min0/4 steps

Let a person use the ledger

The DOM is the browser's object model for the page. JavaScript can listen for a form submission, read its fields, update application state, and render the new result.

This is the turning point: Smart Ledger stops being a script and becomes an application.

Instructions

Select the form and list with querySelector.

Hint: document.querySelector('#transaction-form')

Create renderTransactions and render array items with map.

Listen for submit and call preventDefault.

Push a transaction object and render again.

Your Code

html

6 lines

<!DOCTYPE html>
<html lang="he" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Smart Ledger · מודול 4</title><script src="https://cdn.tailwindcss.com"></script></head><body class="min-h-screen bg-stone-100 p-6"><main class="mx-auto max-w-3xl"><h1 class="text-3xl font-black">Smart Ledger</h1><form id="transaction-form" class="mt-6 grid gap-3 rounded-2xl bg-white p-5 shadow-sm md:grid-cols-4"><input id="description" required placeholder="תיאור" class="rounded-lg border p-3"><select id="type" class="rounded-lg border p-3"><option value="income">הכנסה</option><option value="expense">הוצאה</option></select><input id="amount" required type="number" min="0.01" step="0.01" placeholder="סכום" class="rounded-lg border p-3"><button class="rounded-lg bg-rose-900 p-3 font-bold text-white">הוספה</button></form><ul id="transaction-list" class="mt-5 space-y-2"></ul></main><script>
  const transactions = [];
  // Add renderTransactions().
  // Listen for submit, prevent the refresh, push an object, and render.
</script></body></html>

The DOM and an interactive transaction form

Let a person use the ledger

Instructions

Your Code

Live Preview