B D T Calculator - Copy this React, Tailwind Component to your project
Updated Features: Dynamic Display of Subtotals: Next to each note input field, display the subtotal amount dynamically. Example: Inputting 5 in the 1000 BDT note field will display 5000 beside the input field. Default Blank Fields for Note Quantities: All note quantity input fields should be blank by default (no 0 value). Shortcut for Total Bill Field: Use the F4 key to jump to the Total Bill Amount input field. Monthly Total Amount: Add a Monthly Total Amount section to track the cumulative total of all transactions for the current month. Display this amount prominently at the top or bottom of the page. Expandable Transaction History: The Transaction History section should be hidden by default. Add a button to toggle visibility (expand/collapse) of the transaction history. Age Calculator Feature: Add an "Age Calculator" button to the right side of the page. Shortcut for the Age Calculator: Ctrl+\ (backslash). On clicking the button: Display the Age Calculator section (popup/modal or inline). Automatically focus on the Date of Birth Input Field. Age Calculator should: Accept a date of birth as input. Calculate and display the exact age in years, months, and days. Complete Functionalities: Front-end Design: Use HTML and Tailwind CSS for layout and styling. Divide the page into distinct sections: Inputs: User details, total bill, note denominations with subtotals. Summary: Total amount, necessary/returnable amount, monthly total. Transaction History: Initially hidden, expandable on button click. Age Calculator: Hidden until activated. Functional Requirements: Real-Time Calculations: Subtotals next to note fields. Total amount dynamically updates as inputs change. Necessary/returnable amount calculated based on the total bill. Keyboard Shortcuts: Enter → Move to the next input field. Ctrl+Enter → Save the transaction. Escape → Reset the form, focus on the 1000 BDT Note field. F4 → Jump to Total Bill Input Field. Ctrl+\ → Activate Age Calculator and focus on the date input. Transaction Management: Save and retrieve transactions from localStorage. Expandable/collapsible transaction history section. Age Calculator: Accept date of birth as input. Display exact age in years, months, and days. Enhanced User Experience: Ensure all fields are clear and intuitive with error checks. Color-code necessary/returnable amounts: Red for insufficient funds. Green for excess funds. Toggle buttons (e.g., transaction history) should have smooth animations. Improved Logic: Support dynamic note subtotal calculations for sorted notes. Track and display the monthly total of all transactions. Development Notes: Implement modular and well-commented JavaScript functions to handle: Subtotals and total calculations. Shortcut keys and input focus transitions. Transaction saving, retrieval, and history toggling. Age calculation logic with real-time date parsing.
