كود التطبيق

ملاحظة

النص المكتوب يُضاف إلى القائمة ويُفرَّغ الحقل. النص الفارغ لا يُضاف. هذه مفكرة صغيرة.

<form id="note">
  <input id="text" type="text" placeholder="Qeyd">
  <button type="submit">Əlavə et</button>
</form>
<ul id="list"></ul>
<script>
  const form = document.getElementById("note");
  const text = document.getElementById("text");
  const list = document.getElementById("list");
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const value = text.value.trim();
    if (!value) return;
    const item = document.createElement("li");
    item.textContent = value;
    list.append(item);
    text.value = "";
  });
</script>

الوضع

زر واحد يبدّل الصفحة بين الوضع الداكن والفاتح. الحالة تبقى في صنف ولا تُفتح صفحة ثانية.

<button type="button" id="mode">Tünd</button>
<p id="label">Rejim: açıq</p>
<script>
  const mode = document.getElementById("mode");
  const label = document.getElementById("label");
  mode.addEventListener("click", () => {
    const dark = document.body.classList.toggle("dark");
    document.body.style.background = dark ? "#0f172a" : "#f8fafc";
    document.body.style.color = dark ? "#e2e8f0" : "#0f172a";
    label.textContent = dark ? "Rejim: tünd" : "Rejim: açıq";
  });
</script>

المجموع

يُجمع الرقمان في الحقلين. الكتابة التي ليست رقماً تُحسب صفراً. النتيجة تظهر بعد الزر.

<input id="a" type="number" value="2">
<input id="b" type="number" value="3">
<button type="button" id="add">Cəm</button>
<p id="sum"></p>
<script>
  document.getElementById("add").addEventListener("click", () => {
    const a = Number(document.getElementById("a").value) || 0;
    const b = Number(document.getElementById("b").value) || 0;
    document.getElementById("sum").textContent = String(a + b);
  });
</script>

تطبيق كبير

قائمة دخل ومصروف. إذا لم يكن المبلغ رقماً لا يُضاف. المجموع يُكتب وحده. تبقى القائمة حين تُغلق الصفحة. احفظ الملف كـ .html وافتحه.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="utf-8">
  <title>Kassa</title>
  <style>
    body { margin: 0; font-family: sans-serif; background: #f8fafc; color: #0f172a; }
    main { max-width: 640px; margin: 28px auto; padding: 0 16px; }
    form { display: grid; grid-template-columns: 1fr 120px 140px auto; gap: 8px; }
    input, select { padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
    button { border: 0; border-radius: 8px; padding: 10px 12px; background: #0f766e; color: #fff; }
    table { width: 100%; border-collapse: collapse; margin-top: 16px; }
    td { padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
    .out { color: #b91c1c; }
    @media (max-width: 700px) { form { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
<main>
  <h1>Kassa</h1>
  <p>Qalıq: <b id="total">0</b></p>
  <form id="form">
    <input id="title" type="text" maxlength="80" placeholder="Ad" required>
    <input id="amount" type="number" step="0.01" placeholder="Məbləğ" required>
    <select id="kind">
      <option value="in">Gəlir</option>
      <option value="out">Xərc</option>
    </select>
    <button type="submit">Əlavə et</button>
  </form>
  <table>
    <tbody id="rows"></tbody>
  </table>
</main>
<script>
  const KEY = "nibras-cash";
  const form = document.getElementById("form");
  const rows = document.getElementById("rows");
  const total = document.getElementById("total");

  function load() {
    try {
      const saved = JSON.parse(localStorage.getItem(KEY) || "[]");
      return Array.isArray(saved) ? saved : [];
    } catch {
      return [];
    }
  }

  let items = load().filter((item) => item && typeof item.title === "string" && typeof item.amount === "number");

  function money(value) {
    return value.toFixed(2);
  }

  function balance() {
    return items.reduce((sum, item) => sum + (item.kind === "out" ? -item.amount : item.amount), 0);
  }

  function draw() {
    rows.innerHTML = "";
    items.forEach((item, index) => {
      const row = document.createElement("tr");
      const name = document.createElement("td");
      name.textContent = item.title;
      const amount = document.createElement("td");
      amount.textContent = (item.kind === "out" ? "-" : "+") + money(item.amount);
      amount.className = item.kind === "out" ? "out" : "";
      const remove = document.createElement("td");
      const button = document.createElement("button");
      button.type = "button";
      button.textContent = "Sil";
      button.addEventListener("click", () => {
        items.splice(index, 1);
        localStorage.setItem(KEY, JSON.stringify(items));
        draw();
      });
      remove.append(button);
      row.append(name, amount, remove);
      rows.append(row);
    });
    total.textContent = money(balance());
  }

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const title = document.getElementById("title").value.trim();
    const amount = Number(document.getElementById("amount").value);
    const kind = document.getElementById("kind").value;
    if (!title || !Number.isFinite(amount) || amount <= 0) return;
    items.push({ title, amount, kind });
    localStorage.setItem(KEY, JSON.stringify(items));
    form.reset();
    draw();
  });

  draw();
</script>
</body>
</html>