程序代写代做代考 html database WD1 – ASSIGNMENT 1

WD1 – ASSIGNMENT 1

Instructions

View this video to see a demonstration of the functionality of both the REST API server and React components.

REST API

The REST API server uses the fpl2020.sql database to retrieve content. Setup the fpl2020.sql database if you’ve not done so already.

Get the REST API folder fplrestapi from the resource file and run the server. Setup the node_modules from the Command Prompt BEFORE running the server:

$ cd fplrestapi
$ npm install
$ node index.js

When REST API server is running this link will work.

Provide all necessary code within the files given.

REACT

The route http://localhost:3005/players/ will be used in each of the React components.

Open the react folder from the resource file.

– Copy the files in react/public into your React project public folder.
– Copy the files in react/src into your React project src folder.

You need to write each component in the .js files given. Test the components using the index.js file as normal.

Question 2

Create a component that shows the player images for each player retrieved from the REST API Server http://localhost:3005/players/ route.

You must use the fetch() function to retrieve the player data.

Use the photo field/column from the data to display the appropriate image for each player.
e.g. The player Heung-Min Son (Son) has a photo value of 85971. You can use this value within the URL: https://resources.premierleague.com/premierleague/photos/players/110×140/p85971.png to get the player’s image.

Question 3

Create a component that shows a HTML table of all the players retrieved from the http://localhost:3005/players/ route.

Question 4

Create a component that displays a textbox and a HTML Range Slider (taken from here).

When a player price value is typed in the textbox or the slider is moved, only show players who cost is greater than the value input. In your code solution the value attribute of the textbox and Range Slider is the most important. Filter the player data when a change event happens the HTML components.