DailyLedger📒

A simple web-based diary to record daily expenses and save them as a clean, formatted snapshot.

Introduction

This project is a browser-based Daily Budget Tracker designed to help users record their daily expenses in a diary-style layout. Users can enter expense names and amounts, automatically calculate the total expenditure, and save the filled diary page as an image. The interface is designed to look like a handwritten notebook while providing modern functionality such as auto-calculation, dynamic input handling, and screenshot generation.

Technologies Used

HTML5 – Structure of the web page
CSS3 – Styling and layout (diary-style UI
JavaScript (Vanilla JS) – Logic, event handling, calculations
html2canvas – Capturing and saving the diary page as an image

The Process

• Design the diary-style UI using HTML and CSS
• Implement input handling and total calculation using JavaScript
• Add keyboard navigation for faster data entries
• Dynamically manage expense rows
• Integrate html2canvas to capture only relevant content
• Optimize screenshot output by hiding unused elements temporarily
• Refine layout so the diary page grows automatically with content

What I Learned

1️⃣Managing dynamic DOM elements using JavaScript
2️⃣ Handling real-time calculations and user input events
3️⃣Improving user experience with keyboard navigation
4️⃣Using third-party libraries like html2canvas effectively
5️⃣Debugging layout issues caused by fixed heights and dynamic content
6️⃣Structuring code for better readability and maintainability

##Demo

DailyLedger_Demo.mp4

Output