Make use of JQuery JavaScript library for AJAX functionality and DOM manipulaiton. Use Bootstrap for layout design. Responsive Design: Large screens (e.g., desktops): The webpage should display a single row with four cells. Medium screens (e.g., tablets): The last two cells should move to a new row. Small and extra-small screens (e.g., phones): All cells should stack vertically. Cell Details and Functionality: Fetch student data from  http://192.155.90.208/students.json   using AJAX and store in students array. Make use of this array for below given functionalities. You can treat, student name as primary key. Cell 1: Add a dropdown menu with a list of countries and a " Load Data " button. When the button is clicked, distinct countries from students array shall be loaded into option list. When a country is selected, display the filtered list of students from the selected country in Cell 2.  Cell 2: Show the student list in a table. The table should have the following colum...

Layout - R ow 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.