2.19

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家庭记账本</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <header>
            <h1>家庭记账本</h1>
            <button onclick="showAddTransactionModal()">添加记录</button>
        </header>
        <main>
            <div id="transaction-list">
                <!-- Transaction items will be dynamically added here -->
            </div>
        </main>
        <footer>
            <p>Total Expenditure: <span id="totalExpenditure">0</span></p>
        </footer>
    </div>

    <!-- Add Transaction Modal -->
    <div id="addTransactionModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddTransactionModal">&times;</span>
            <h2>添加记录</h2>
            <!-- Form for adding a new transaction -->
            <form onsubmit="addTransaction(); return false;">
                <label for="amount">金额:</label>
                <input type="number" id="amount" required>
                
                <label for="category">类别:</label>
                <input type="text" id="category" required>
                
                <button type="submit">添加</button>
            </form>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

 

posted @ 2024-02-29 08:49  席  阅读(9)  评论(0)    收藏  举报