Smart Credit Card Manager
About this app
Manage your credit card expenses, visualize spending, and track payment due dates seamlessly. Simplify your financial life with our intuitive app.
Smart Credit Card Manager Smart Credit Card Manager Expense Description Expense Amount Add Expense Total Spent: $0.00
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Smart Credit Card Manager</title>
<meta name="description" content="Manage your credit card expenses, visualize spending, and track payment due dates seamlessly. Simplify your financial life with our intuitive app.">
<meta name="keywords" content="credit card, expense tracker, finance, budgeting, manage payments, budget app, money management">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const cardForm = document.getElementById('cardForm');
const expensesList = document.getElementById('expensesList');
const totalSpent = document.getElementById('totalSpent');
let total = 0;
cardForm.addEventListener('submit', function(event) {
event.preventDefault();
const description = document.getElementById('description').value;
const amount = parseFloat(document.getElementById('amount').value);
if (description && amount > 0) {
const listItem = document.createElement('li');
listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
listItem.textContent = `${description}: $${amount.toFixed(2)}`;
expensesList.appendChild(listItem);
total += amount;
totalSpent.textContent = `Total Spent: $${total.toFixed(2)}`;
cardForm.reset();
} else {
alert('Please fill in valid description and amount.');
}
});
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #74ebd5, #9face6);
color: #333;
font-family: Arial, sans-serif;
}
#main-container {
padding: 20px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
h2 {
color: #2c3e50;
text-shadow: 1px 1px 2px rgba(256, 256, 256, 0.8);
}
.card {
margin-bottom: 20px;
}
.list-group-item {
transition: background 0.3s;
}
.list-group-item:hover {
background-color: #f7f7f7;
}
button {
background: #3498db;
color: #fff;
}
button:hover {
background: #2980b9;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h2 class="text-center">Smart Credit Card Manager</h2>
<div class="card">
<div class="card-body">
<form id="cardForm">
<div class="mb-3">
<label for="description" class="form-label">Expense Description</label>
<input type="text" class="form-control" id="description" required>
</div>
<div class="mb-3">
<label for="amount" class="form-label">Expense Amount</label>
<input type="number" class="form-control" id="amount" min="0.01" step="0.01" required>
</div>
<button type="submit" class="btn btn-primary">Add Expense</button>
</form>
</div>
</div>
<h4 id="totalSpent">Total Spent: $0.00</h4>
<ul id="expensesList" class="list-group"></ul>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!