Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accounting Journal</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Accounting Journal</h1>
    <form id="journalForm">
        <label for="date">Date:</label>
        <input type="date" id="date" required>
        <label for="description">Description:</label>
        <input type="text" id="description" required>
        <label for="debit">Debit:</label>
        <input type="number" id="debit" required>
        <label for="credit">Credit:</label>
        <input type="number" id="credit" required>
        <button type="submit">Add Entry</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Description</th>
                <th>Debit</th>
                <th>Credit</th>
            </tr>
        </thead>
        <tbody id="journalEntries">
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}

label {
    margin-top: 10px;
}

input {
    padding: 5px;
    margin-top: 5px;
}

button {
    margin-top: 20px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

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

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}
JavaScript (script.js)
document.getElementById('journalForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const date = document.getElementById('date').value;
    const description = document.getElementById('description').value;
    const debit = document.getElementById('debit').value;
    const credit = document.getElementById('credit').value;

    const table = document.getElementById('journalEntries');
    const row = table.insertRow();
    row.insertCell(0).innerText = date;
    row.insertCell(1).innerText = description;
    row.insertCell(2).innerText = debit;
    row.insertCell(3).innerText = credit;

    document.getElementById('journalForm').reset();
});
This code creates a basic website where you can input
Editor is loading...