Simple Expense Manager with CRUD Functionality using HTML, CSS, and JavaScript

Managing expenses is a daily necessity, and a handy expense manager can be a lifesaver. In this blog, we’ll build a basic Expense Manager that lets users add, view, update, and delete expenses. This will give you an idea of how simple web technologies (HTML, CSS, and JavaScript) can be used to build dynamic, functional applications with full CRUD (Create, Read, Update, Delete) capabilities.

Features of Our Expense Manager

1. Create: Add new expenses.
2. Read: Display all expenses in a table.
3. Update: Edit any existing expense.
4. Delete: Remove any expense from the list.
5. Total: Calculate the total amount of expenses.

Use Case Diagram

UML code:

@startuml
actor User as u

rectangle "Expense Manager" {
    usecase "Add Expense" as UC1
    usecase "View Expenses" as UC2
    usecase "Update Expense" as UC3
    usecase "Delete Expense" as UC4
    usecase "Calculate Total" as UC5
}

u --> UC1: Add Expense
u --> UC2: View Expenses
u --> UC3: Update Expense
u --> UC4: Delete Expense
UC5 --> UC2: Update Total
@enduml

Sequence Diagram for Adding an Expense