Keep track of your spending with this expense tracker built using HTML, CSS and JavaScript. I made it in VS Code as a fun way to practise DOM manipulation, arrays and working with localStorage.
The site includes a transaction form that allows users to input a description, amount, transaction type (income or expense), category label, and date. The category input supports both predefined options and custom entries, which are rendered as colour-coded pill-shaped tags for visual categorisation. A date picker is used for selecting transaction dates. The form can be collapsed to reduce visual clutter. A summary section at the top displays the current balance, total income, and total expenses. Users can filter the transaction list to show all entries, only income, or only expenses.
The delete functionality uses a soft delete approach. When a user deletes a transaction, it is flagged and moved to a separate bin array rather than being removed from the main data structure. The bin is accessible via a filter that displays only soft-deleted items. Each item in the bin can be restored by moving it back to the main transactions array. A “Delete All” function is available for both the bin and the entire dataset. Both actions are gated by confirmation prompts to prevent accidental permanent deletion.
Input sanitisation is implemented to prevent the execution of malicious code. Special characters are escaped in all form inputs to mitigate the risk of script injection. Additionally, character limits are enforced on all input fields for both typed and pasted content, reducing the risk of abuse through excessively long or potentially harmful input strings.
