ה־DOM וטופס תנועה אינטראקטיבי

בינוני~35 דק׳0/4 שלבים

נותנים לאדם להשתמש בספר התנועות

ה־DOM הוא מודל האובייקטים של העמוד בדפדפן. JavaScript יכול להאזין לשליחת טופס, לקרוא שדות, לעדכן את מצב האפליקציה ולהציג את התוצאה.

זו נקודת המפנה: Smart Ledger מפסיק להיות סקריפט והופך לאפליקציה.

הוראות

בחרו את הטופס ואת הרשימה בעזרת querySelector.

רמז: document.querySelector('#transaction-form')

צרו renderTransactions שמציג פריטים מהמערך בעזרת map.

האזינו לאירוע submit וקראו ל־preventDefault.

הוסיפו אובייקט תנועה למערך והציגו מחדש.

הקוד שלכם

html

6 שורות

<!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>

ה־DOM וטופס תנועה אינטראקטיבי

נותנים לאדם להשתמש בספר התנועות

הוראות

הקוד שלכם

תצוגה חיה