Use JavaScript, DOM, and Express.js for a web app that calls the Random Person API, https://randomuser.me/api/,

Links to an external site.

from the browser and from an Express app, and maintains statistics using an Express middleware function.

Your app will consist of:

• A homepage and client-side JavaScript code.
  • A static HTML page that is displayed as the homepage (i.e., displayed in the browser for the URL http://localhost:3000), Links to an external site. and includes 2 links that execute JavaScript code to send 2 different HTTP requests
• An Express app listening at port 3000.
  • app serves the homepage.
    • Provides an endpoint for GET requests to the URL /random-person
    • Includes a middleware function to maintain and print statistics to the console running the Express app.

Homepage and Client-side JavaScript Code

• The file index.html in the directory public is the homepage.
  • No JavaScript code in this file
• 2 links, using elements, with short content that describes the behavior of the links. We will refer to these links as "The Direct Link" and "The Express Link."

The Direct Link

A user click on this link, i.e., the click event on the link, must result in the execution of JavaScript code in the file random.js that

• Uses the fetch APILinks to an external site. to send a request to the Random User API.
• Displays the first name, last name, phone number and email of the random person sent in the response sent by the Random User API by adding one or more nodes in the page using the DOM API.

The Express Link

A user clicks on this link, i.e., the click event on the link must result in the execution of JavaScript code in the file random.js that

• Uses the fetch API to send a request to the Express app's endpoint GET /random-person.
• Displays the first name, last name, phone number and email of the random person sent in the response sent by the Express API by adding one or more nodes in the page using the DOM API.

Endpoint to Call Random Person API

Code a route handler for the endpoint GET /random-person.

• This route handler must call the Random Person API using the npm package node-fetch Links to an external site..
• It must return the response from the Random Person API as its own response to the request. The response status code must be 200.
• The route handler must be coded so that if an exception were to be thrown by the statements it executes, a response with status code 500 must be sent back. This response must be generated by an error handler middleware function written by you.
• The file server.mjs will contain the code for the Express app, i.e., the server-side of your web app.
  • Add code in this file for a route handler, and for maintaining and printing statistics.

Middleware to Print Statistics

Need a named middleware function that maintains a count of how many HTTP requests have been received for the endpointGET /random-person and prints these statistics to the console on every 10th request.

• must maintain a count of these requests received from the time the server was started.
• The statistics must be printed to the console running the Express app after the 10th request and then every 10 requests after that.
  • i.e., after 10 retrieve requests are received, then after a total of 20 retrieve requests, then after 30, and so on.
• The maintenance and printing of the statistics must be done solely by this named middleware function, and not by the code of the app.get route handler for this endpoint.

index.html         
To be implementd
  

server.mjs

import express from 'express'; import fetch from 'node-fetch'; import 'dotenv/config'; import asyncHandler from 'express-async-handler';

const PORT = process.env.PORT const app = express();

app.use(express.static('public'));

// Note: Don't add or change anything above this line. /* Add your code here */

// Note: Don't add or change anything below this line. app.listen(PORT, () => { console.log(`Server listening on port ${PORT}...`); });