AJAX and DOM Manipulation - Display Monthly Expenses

Layout - Row 1

Create a Bootstrap row with 3 cells.

On large screens, cells should be in a row; on smaller screens, stack them vertically.

Cell 1:

Fetch expense details using AJAX from http://192.155.90.208/expenses.json

Display months names in e.g. January, February, and March, each in a separate <div> element.

Cell 2:

When month in cell 1 is clicked, show a table with Sr. #, Expense Category, Total columns in cell 2.

Add a Grand Total row at the bottom.

Cell 3:

Add a “Show Details” button below the table in Cell 2.

On click, display a table with Sr. #, Description, Category, Amount columns and a final Total Amount row.

Row 2 - Cell 1

Create a form with fields for Description, Category, Amount, and Month, along with an Add button to add a new expense. Choose appropriate input types as needed. When the button is clicked, Row 1 data and behavior shall include the new expense added.