Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Detaylı Finans Takip</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
    }

.container {
      background: #fff;
      padding: 20px;
      margin-top: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 95%;
      max-width: 900px;
    }

h1, h2 {
      text-align: center;
      color: #333;
    }

form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      margin-bottom: 20px;
    }

input, select, button {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

button {
      background-color: #28a745;
      color: white;
      border: none;
      cursor: pointer;
      grid-column: span 2;
    }

button:hover {
      background-color: #218838;
    }

#summary {
      margin-bottom: 20px;
      padding: 10px;
      background: #e9ecef;
      border-radius: 4px;
      display: flex;
      justify-content: space-around;
    }

#summary p {
      margin: 0;
      font-weight: bold;
    }

table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

th, td {
      padding: 10px;
      border: 1px solid #ccc;
      text-align: center;
    }

th {
      background-color: #f1f1f1;
    }

.income {
      background-color: #d4edda;
    }

.expense {
      background-color: #f8d7da;
    }

.delete-btn {
      background: red;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Detaylı Kişisel Finans Takibi</h1>

<form id="transaction-form">
      <input type="text" id="description" placeholder="Açıklama (örn. Kira)" required />
      <input type="number" id="amount" placeholder="Tutar (TL)" required />
      <select id="category">
        <option value="Maaş">Maaş</option>
        <option value="Market">Market</option>
        <option value="Ulaşım">Ulaşım</option>
        <option value="Fatura">Fatura</option>
        <option value="Diğer">Diğer</option>
      </select>
      <input type="date" id="date" required />
      <select id="type">
        <option value="income">Gelir</option>
        <option value="expense">Gider</option>
      </select>
      <button type="submit">İşlem Ekle</button>
    </form>

<div id="summary">
      <p>Toplam Gelir: <span id="total-income">0</span> TL</p>
      <p>Toplam Gider: <span id="total-expense">0</span> TL</p>
      <p>Bakiye: <span id="balance">0</span> TL</p>
    </div>

<h2>İşlem Tablosu</h2>
    <table>
      <thead>
        <tr>
          <th>Açıklama</th>
          <th>Tutar (TL)</th>
          <th>Kategori</th>
          <th>Tarih</th>
          <th>Tür</th>
          <th>Sil</th>
        </tr>
      </thead>
      <tbody id="transaction-table"></tbody>
    </table>
  </div>

const description = document.getElementById('description').value;
      const amount = parseFloat(document.getElementById('amount').value);
      const category = document.getElementById('category').value;
      const date = document.getElementById('date').value;
      const type = document.getElementById('type').value;

if (amount <= 0 || isNaN(amount)) {
        alert("Geçerli bir tutar girin!");
        return;
      }

const tbody = document.getElementById('transaction-table');
      const row = document.createElement('tr');
      row.classList.add(type);

row.innerHTML = `
        <td>${description}</td>
        <td>${amount.toFixed(2)}</td>
        <td>${category}</td>
        <td>${date}</td>
        <td>${type === 'income' ? 'Gelir' : 'Gider'}</td>
        <td><button class="delete-btn" onclick="deleteTransaction(this, ${amount}, '${type}')">Sil</button></td>
      `;

tbody.appendChild(row);
      updateSummary(amount, type);

// formu temizle
      document.getElementById('transaction-form').reset();
    });

function updateSummary(amount, type) {
      const totalIncomeEl = document.getElementById('total-income');
      const totalExpenseEl = document.getElementById('total-expense');
      const balanceEl = document.getElementById('balance');

let income = parseFloat(totalIncomeEl.textContent);
      let expense = parseFloat(totalExpenseEl.textContent);

if (type === 'income') {
        income += amount;
      } else {
        expense += amount;
      }

totalIncomeEl.textContent = income.toFixed(2);
      totalExpenseEl.textContent = expense.toFixed(2);
      balanceEl.textContent = (income - expense).toFixed(2);
    }

function deleteTransaction(button, amount, type) {
      if (!confirm("Bu işlemi silmek istediğinizden emin misiniz?")) return;

const row = button.parentElement.parentElement;
      row.remove();

const totalIncomeEl = document.getElementById('total-income');
      const totalExpenseEl = document.getElementById('total-expense');
      const balanceEl = document.getElementById('balance');

let income = parseFloat(totalIncomeEl.textContent);
      let expense = parseFloat(totalExpenseEl.textContent);

if (type === 'income') {
        income -= amount;
      } else {
        expense -= amount;
      }

totalIncomeEl.textContent = income.toFixed(2);
      totalExpenseEl.textContent = expense.toFixed(2);
      balanceEl.textContent = (income - expense).toFixed(2);
    }
  </script>
</body>
</html>

Preview

Open Advanced Editor Full Screen