How do we solve the following problems using CSI$142$ Web Development II$?$

Requirements:

Basic understanding of JavaScript functions and scope

Familiarity with asynchronous programming concepts

HTML knowledge for displaying data and error messages

Task $1$: Create a JSON File with Student Data

Create a JSON file named studentsisisen.

Construct a JSON array containing at least $15$ student objects.

Each student object should have the following properties:

name: A string representing the student's full name.

age: An integer representing the student's age.

grade: A string representing the student's current grade level.

Major: A string representing the student's major field of study.

Ensure that each student object has unique data for all properties.

Task $2$: Implementing an IIFE and Displaying Data in HTML

Create an HTML file with the necessary structure $($html$,$ head, body$).$ Inside the body tag, create HTML elements to display the data.

Create a JavaScript file named main.js$.$

Inside main.js$,$ write an Immediately Invoked Function Expression $($IIFE$)$ that fetches student data from the provided JSON file students.ison.

Parse the JSON data and display the information of all students in the HTML elements.

Handle errors appropriately and display error messages if the data fetching fails.

Link the main.js file to the HTML file using the script tag.

Test your implementation by opening the HTML file in a web browser and checking if the data is displayed correctly.

Task $3$: Handling Asynchronous Operations with Promises and Displaying Data$/$Error in HTML

Extend the main.js file to handle asynchronous operations using Promises.

Inside main.js$,$ write a function fetchData that simulates fetching data asynchronously from the created JSON file studentsilson. This function should return a Promise.

Inside the fetchData function, use Fetch API to fetch student data from the JSON file.

Parse the JSON data to get the array of student objects.

$$

Simulate a delay of $2$ seconds before resolving the Promise with the array of student objects.

Handle errors appropriately and reject the Promise with an error message if the data fetching fails.

Update the content of the HTML elements to display the fetched student data when the Promise resolves and update it to display an error message when the Promise is rejected.

Test your implementation by refreshing the web page and checking if the data or error message is displayed correctly.

ask $4$: Implementing Additional Functionality with Buttons

Create three separate buttons in the HTML file:

The first button should filter and display students majoring in Computer Science with an age greater than $20.$

The second button should calculate and display the average age of all students.

The third button should filter and display only students with odd index values.

Implement the functionality for each button in main.js:

The first button should fetch the data, filter students as per the specified condition, and display the filtered students' information.

The second button should fetch the data, calculate the average age, and display it$.$

The third button should fetch the data, filter students with odd index values, and display their information.

Handle errors appropriately for each button functionality.

Test the implementation by clicking each button and verifying the results.