Introduction 🚀
In today's digital age, understanding Object-Oriented Programming (OOP) in JavaScript is pivotal for creating powerful and scalable applications. This blog post will guide you through the core concepts of OOP using JavaScript, and you'll build a simple income and expenses tracker that leverages browser Local Storage. Let's dive in! 💻
Understanding OOP in JavaScript
Object-Oriented Programming allows developers to design and structure software in a more modular, organized way. In JavaScript, OOP is implemented via prototype-based programming. Here are some fundamental OOP concepts:
-
Classes and Instances: In ES6, JavaScript introduced the
classkeyword. Classes are blueprints for objects, and instances are objects created from these blueprints. - Encapsulation: Hiding the internal state and requiring all interaction to be performed through an object’s methods.
- Inheritance: A way to create new classes based on existing ones.
- Polymorphism: The ability to present the same interface for different data types.
Creating the Finance Tracker App 🏦
Let's start by creating two classes: Transaction for recording individual transactions, and FinanceTracker to manage them.
Step 1: Define the Transaction Class
class Transaction {
constructor(type, amount) {
this.type = type; // 'income' or 'expense'
this.amount = amount;
}
}
Step 2: Define the FinanceTracker Class
class FinanceTracker {
constructor() {
this.transactions = JSON.parse(localStorage.getItem('transactions')) || [];
}
addTransaction(transaction) {
this.transactions.push(transaction);
this.updateLocalStorage();
}
getBalance() {
return this.transactions.reduce((balance, transaction) => {
return transaction.type === 'income' ? balance + transaction.amount : balance - transaction.amount;
}, 0);
}
updateLocalStorage() {
localStorage.setItem('transactions', JSON.stringify(this.transactions));
}
}
Step 3: Implement User Interface and Local Storage
To interact with our classes, let's create a simple HTML interface.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finance Tracker</title>
</head>
<body>
<h1>Finance Tracker</h1>
<form id="transaction-form">
<input type="text" id="transaction-type" placeholder="Type (income/expense)" required>
<input type="number" id="transaction-amount" placeholder="Amount" required>
<button type="submit">Add Transaction</button>
</form>
<h2 id="balance">Balance: $0</h2>
<script src="app.js"></script>
</body>
</html>
Next, we handle form submissions to add new transactions.
const financeTracker = new FinanceTracker();
const form = document.getElementById('transaction-form');
const balanceElement = document.getElementById('balance');
form.addEventListener('submit', function(event) {
event.preventDefault();
const type = document.getElementById('transaction-type').value;
const amount = parseFloat(document.getElementById('transaction-amount').value);
if (type && !isNaN(amount)) {
const transaction = new Transaction(type, amount);
financeTracker.addTransaction(transaction);
updateBalanceUI();
}
form.reset();
});
function updateBalanceUI() {
balanceElement.innerText = `Balance: $${financeTracker.getBalance()}`;
}
updateBalanceUI();
Conclusion 🎉
Congratulations! 🎊 You've built a basic finance tracker using Object-Oriented Programming in JavaScript. By creating reusable and maintainable code, you've utilized classes to effectively manage data with Local Storage, a crucial skill for modern web developers. Continue exploring more complex applications and how different OOP principles can be applied! Keep learning and happy coding! 📚
References 📚
Note: As technology evolves quickly, some links may become outdated. Always refer to the latest resources and documentation.
