Berikut adalah contoh Aplikasi manajemen keuangan dengan menggunakan JavaScript dan CSS.
HTML (index.html)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budgeting Management App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Budgeting Management App</h1>
</header>
<main>
<section id="income">
<h2>Income</h2>
<form id="income-form">
<input type="text" id="income-description" placeholder="Description">
<input type="number" id="income-amount" placeholder="Amount">
<button type="submit">Add Income</button>
</form>
<ul id="income-list"></ul>
</section>
<section id="expenses">
<h2>Expenses</h2>
<form id="expenses-form">
<input type="text" id="expenses-description" placeholder="Description">
<input type="number" id="expenses-amount" placeholder="Amount">
<button type="submit">Add Expense</button>
</form>
<ul id="expenses-list"></ul>
</section>
<section id="summary">
<h2>Summary</h2>
<div id="total-income"></div>
<div id="total-expenses"></div>
<div id="balance"></div>
</section>
</main>
</div>
<script src="app.js"></script>
</body>
</html>CSS (style.css)
CSS
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
.container {
max-width: 900px;
background: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
margin: 20px auto;
padding: 20px;
background-color: #F2F4F4;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
margin-top: 0;
}
form {
display: flex;
margin-bottom: 10px;
}
input[type="text"],
input[type="number"] {
padding: 5px;
margin-right: 10px;
}
button {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
}
#summary {
display: flex;
justify-content: space-between;
align-items: center;
}
#summary div {
display: flex;
justify-content: space-between;
}JavaScript (script.js)
JavaScript
// app.js
const incomeForm = document.getElementById('income-form');
const incomeDescriptionInput = document.getElementById('income-description');
const incomeAmountInput = document.getElementById('income-amount');
const incomeList = document.getElementById('income-list');
const expensesForm = document.getElementById('expenses-form');
const expensesDescriptionInput = document.getElementById('expenses-description');
const expensesAmountInput = document.getElementById('expenses-amount');
const expensesList = document.getElementById('expenses-list');
const totalIncome = document.getElementById('total-income');
const totalExpenses = document.getElementById('total-expenses');
const balance = document.getElementById('balance');
let income = [];
let expenses = [];
incomeForm.addEventListener('submit', (e) => {
e.preventDefault();
const description = incomeDescriptionInput.value;
const amount = parseFloat(incomeAmountInput.value);
if (description && amount) {
const newIncome = {
description,
amount
};
income.push(newIncome);
updateIncomeList();
updateSummary();
incomeDescriptionInput.value = '';
incomeAmountInput.value = '';
}
});
expensesForm.addEventListener('submit', (e) => {
e.preventDefault();
const description = expensesDescriptionInput.value;
const amount = parseFloat(expensesAmountInput.value);
if (description && amount) {
const newExpense = {
description,
amount
};
expenses.push(newExpense);
updateExpensesList();
updateSummary();
expensesDescriptionInput.value = '';
expensesAmountInput.value = '';
}
});
function updateIncomeList() {
incomeList.innerHTML = '';
let total = 0;
income.forEach((item) => {
const li = document.createElement('li');
li.innerText = `${item.description}: $${item.amount.toFixed(2)}`;
incomeList.appendChild(li);
total += item.amount;
});
totalIncome.innerText = `Total Income: $${total.toFixed(2)}`;
}
function updateExpensesList() {
expensesList.innerHTML = '';
let total = 0;
expenses.forEach((item) => {
const li = document.createElement('li');
li.innerText = `${item.description}: $${item.amount.toFixed(2)}`;
expensesList.appendChild(li);
total += item.amount;
});
totalExpenses.innerText = `Total Expenses: $${total.toFixed(2)}`;
}
function updateSummary() {
let totalIncomeValue = 0;
let totalExpensesValue = 0;
income.forEach((item) => {
totalIncomeValue += item.amount;
});
expenses.forEach((item) => {
totalExpensesValue += item.amount;
});
const balanceValue = totalIncomeValue - totalExpensesValue;
totalIncome.innerText = `Total Income: $${totalIncomeValue.toFixed(2)}`;
totalExpenses.innerText = `Total Expenses: $${totalExpensesValue.toFixed(2)}`;
balance.innerText = `Balance: $${balanceValue.toFixed(2)}`;
}Output:
See the Pen Budgeting Management App by WebbizID (@De-Orchids) on CodePen.
Secara keseluruhan, kode ini menghasilkan aplikasi manajemen penganggaran yang ramah pengguna dengan desain visual yang menarik. Pengguna dapat dengan mudah melacak pendapatan dan pengeluaran mereka, membantu mereka mengelola keuangan secara efektif.
Leave a Reply