How to solve this problem using CSI$142$ Web Development II$?$

Handling Asynchronous Operations with Promises, IIFE, and HTML Display

Objective:

The objective of this problem is to practice handling asynchronous operations using Promises in

JavaScript, encapsulating code using IIFE, and displaying the fetched data$/$error messages in HTML$.$

Additionally, students will implement functionality to filter and manipulate student data based on

user interaction with separate buttons.

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 students.json.

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.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.json.

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 students.json. 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.

Task $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.Task $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.