[Solved] CSE 106 Lab 5

Create a grades program that has a similar functionality to the one you created in Lab 1, but this will be a web application. For this lab you will create the user interface with HTML, CSS, and JavaScript which will make requests to an existing backend service to fulfill the requests. Your web application should:

• Allow a user to ask for a grade from the backend and display the grade, given the student name
• Allow the user to see all students and grades
• Allow a user to create a new student name and grade in the backend
• Allow a user to edit a grade in the backend
• Allow a user to delete a grade in the backend

The REST API you will use has the following methods at https://amhep.pythonanywhere.com:

GET /grades

Input: None

Return: JSON of students with grades

GET /grades/<student name>

Input: None

Return: JSON of student with grades

POST /grades

Input: JSON of student name and corresponding grade, e.g. {name: John Doe, grade: 92.1}

Return: JSON of student with grades after operation takes place

PUT /grades/<student name>

Input: JSON of the grade that corresponds to the student name in the URI, e.g. {grade: 92.1}

Return: JSON of student with grades after operation takes place

DELETE /grades/<student name>

Input: None

Return: JSON of student with grades after operation takes place

Be aware:

• This code will be used again for the next two labs, so make it good
• Please dont upload inappropriate names as this is shared by the whole class Please dont delete all the names for the same reason

Hints:

• Student names are case sensitive in URI and JSON
• Use %20 instead of a space in the URI since spaces arent allowed and represented by %20
• POST and PUT requests should have the header Content-Type: application/json