Project Requirements: Develop a document with a dynamic table for a transaction log using HTML, CSS, and JavaScript with these requirements:
1. Develop a dynamic table initially displayed similar to Figure 1.
Transaction Log:
Select Trans # Date mm/dd/yyyy Total amount: 0.0
Add New Row Insert Row Before Insert Row After Delete Selected Rows
Figure 1. Initial Table Display
2. The user can add more rows to the end of the table by clicking on the "Add New Row" button. The updated table will be similar to Figure 2. A transaction sequence number, Trans #, must be automatically added to each row. The amounts must be initially zeros.
Transaction Log:
Select Trans # Date mm/dd/yyyy Description Amount
Total amount: 0.0
Add New Row Insert Row Before Insert Row After Delete Selected Rows
Figure 2. The table after adding some rows.
3. The user can define a transaction by entering the date, description, and amount of the transaction.
4. The document must update the total amount field as soon as the user enters any transaction amount.
5. The user can insert one or more rows by selecting the rows to insert before or insert after and clicking on "Insert Row Before" or "Insert Row After". The transaction sequence numbers, Trans #, must be automatically updated.
6. The user can remove one or more rows by selecting these rows and clicking on "Delete Selected Rows". The total amount and transaction sequence numbers, Trans #, must be automatically updated.
7. Add meaningful styles to your document using CSS.
8. Add comments to your JavaScript code to explain your program logic.
