Assignments > HW3. Web Client: Doctor Who Front-End

Due on Fri, 05/14 @ 11:59PM. 24 Points.

Introduction

In this assignment, you are going to build part of a graphical user interface (i.e. web client) to interact your Doctor Who REST API, using HTML, CSS, and Vanilla JavaScript. Here are some links to relevant lectures that cover the technologies you will be using:

A Few Guidelines

You may work with a partner (same collaboration policy as in HW 1 & 2).
You may NOT use any JavaScript frameworks. Everything must be completed using “Vanilla” JavaScript, HTML, and CSS.

Part 1: Set Up Your Files

doctor-who-ui.zip

Download doctor-who-ui.zip, which is a modified version of the Homework 2 files.

Changelog

The files you’re downloading are the same as the ones in HW2, with the following exceptions:

There is a new version of the config/data.json file. The file has the same doctors and companions, but new data fields have been added:
- image_url – to store an image of each doctor / companion.
- ordering – to help sort doctors / companions chronologically.
The src/schemas/Doctor.js and src/schemas/Companion.js schemas have been updated to accommodate the (optional) new fields.
The index.js is now listening for static media requests in the public directory, which is controlled by the following line of code:
- app.use(express.static('public'))
There is a new testing file: test/new-tests.js.

Configure your new server

Please complete the following steps to configure your new server:

Copy the .env file you have been using all quarter into the root of your doctor-who-ui directory.
Copy your completed routes.js from Homework 2 into the src directory (replacing the current one).
Install the dependencies npm install
Populate your DB: npm run populate
Run your server: npm start
Run your tests again (in a different terminal window): npm test
- All of the tests should pass (if they passed before) except for some of the ones in test/new-tests.js. You will fix this failing tests in Part 2 (below).

Part 2: Back-End (Server) Updates

Please modify your routes.js file as follows:

1. Update POST & PATCH routes to honor the new attributes (1 point)

Since the Doctor.js and Companion.js schemas have changed, you may need to update the endpoints listed below so that the image_url and ordering attributes are saved to the database:

/doctors (POST)
/doctors/:id (PATCH)
/companions (POST)
/companions/:id (PATCH)

NOTE: If the new POST and PATCH tests already pass (in test/new-tests.js), it means that you can skip this step (because you’ve already implemented your endpoints in a way that allows for new attributes).

2. Add sorting to the /doctors and /companions GET endpoint (1 point)

You will also modify the /doctors and /companions GET endpoint (in routes.js) so that each respective list is sorted by the ordering attribute. To do this, include the .sort() function to the end of you find() query. For instance:

Doctor
    .find({})
    .sort('ordering')  // sort by the "ordering" attribute
    .then(...)

3. Verify your changes

When you’re done, run the tests again and they should all pass!

Part 3: Front-End (Client) Updates

In Part 3, you will be making the editor for your web client. To do this, you will be making all of your edits in the public directory, which contains the following files:

├── css
│   └── editor.css
├── scripts
│    └── editor.js
└── editor.html

For the Editor UI, you will be making changes to editor.html and scripts/editor.js. You’re welcome to edit the CSS file, but we won’t be evaluating you on the styling of your editor.

Navigate to: http://localhost:8081/editor.html to preview the current state of this page – don’t forget to start your server (npm start).

Then, open editor.html and scripts/editor.js in your code editor.

Note that editor.html has a few empty sections but not much else. You’ll be dynamically creating the panels (by responding to user events) using JavaScript.
Note that in scripts/editor.js, there is already one function implemented for you – initResetButton which attaches a click event handler to the button with the id of “reset”. When clicked, the event handler issues a request to the /reset API Endpoint (which resets the database). While this is useful for testing in this class, it’s a terrible idea in real life.

After getting oriented with the two files, please complete the following tasks using JavaScript (you are also welcome to modify the HTML or CSS if it helps you achieve the required functionality):

1. Display all of the doctors (2 Points)

When the page loads, fetch all of the doctors from your http://localhost:8081/doctors endpoint, and display the names of all of the doctors in the left-hand panel. We suggest that you render the doctors as a list of anchor tags. There is an example of how to do something like this in Lecture 9, but feel free to do it your way.

2. Display individual doctor and associated companions (4 Points)

When the user clicks on one of the doctors, display the following:

A panel showing the doctor’s name, picture, and seasons (2 points).
A panel showing all of the companions that traveled with that particular doctor (2 points).

Hints:

This may require 2 fetch requests to be issued simultaneously ((depending on how you chose to implement this functionality): one to /doctors/:id and one to /doctors/:id/companions.
It is common, in front-end programming, to issue many asynchronous function calls, as these calls don’t necessarily have to wait for one another.

Demo video below:

3. Add the ability to create a new doctor (6 Points)

[1 pt] Add a “create doctor” button to your UI. When the user clicks this button, the UI should show a form on the screen that allows the user to input the data to create a new doctor.
If the user clicks the save button. Check the data the user entered and make sure it is valid.
- [2 pts] If it is:
  - [1 pt] Issue a POST request to the /doctors/ endpoint with the data the user inputted.
  - [0.5 pts] Redraw the left-hand panel so that the new doctor is now in the list.
  - [0.5 pts] Show the new doctor in the doctor “detail” panel (as shown in the video).
- [2 pts] If it isn’t, display a message to the user asking them to fix the data.
[1 pts] If the user clicks the cancel button, hide the “detail” panels (only the doctor list should be showing).

Here is sample code for an HTML form that you’re welcome to use:

<form>
    <!-- Name -->
    <label for="name">Name</label>
    <input type="text" id="name">

    <!-- Seasons -->
    <label for="seasons">Seasons</label>
    <input type="text" id="seasons">

    <!-- Ordering -->
    <label for="ordering">Ordering</label>
    <input type="text" id="ordering">

    <!-- Image -->
    <label for="image_url">Image</label>
    <input type="text" id="image_url">

    <!-- Buttons -->
    <button class="btn btn-main" id="create">Save</button>
    <button class="btn" id="cancel">Cancel</button>
</form>

See demo video below:

4. Add the ability to edit an existing doctor (6 points)

[1 pt] Inside of the panel showing the doctor’s name, picture, and seasons, add an “Edit” button. When the user clicks this button, the UI should show a form on the screen that is pre-populated with the doctor’s existing data (which the user will be able to edit).
If the user clicks the save button. Check the data the user entered and make sure it is valid.
- [2 pts] If it is:
  - [1 pt] Issue a PATCH request to the /doctors/:id endpoint with the data the user inputted.
  - [0.5 pt] Redraw the left-hand panel so that any updates to the doctor are reflected in the list.
  - [0.5 pt] Show the “detail panel” with the edited doctor’s updated information.
- [2 pts] If it isn’t, display a message to the user asking them to fix the data.
[1 pt] If the user clicks the cancel button, show the “detail panel” with the doctor’s information. See demo video below:

5. UI to Delete a Doctor (2 Points)

Inside of the panel showing the doctor’s name, picture, and seasons, add a “Delete” button. When the user clicks this button, prompt the user with a confirmation message, asking them whether they’re sure they want to delete the doctors (consider using the built-in confirm function).
- [1.5 pts] If they say “OK”:
  - [1 pt] Issue a DELETE request to the /doctors/:id endpoint.
  - [0.5 pt] Redraws the left-hand panel so that any updates to the doctor are reflected in the list; hides the “detail” panels (only the doctor list should be showing).
- [0.5 pts] If the user cancels, show the “detail panel” with the doctor’s information.

See demo video below:

6. Extra Credit (Up to 6 Points)

[2 pt] Allow the user to edit a companion (see video below)
[1 pt] Allow the user to delete a companion (see video below)
[2 pt] Allow the user to add a new a companion for the specific doctor (see video below)
[2 pt] Allow the user to favorite a doctor or companion
[2 pt] Allow the user to view their favorite doctors / companions

Here is a demo of (some of the) optional functionality.

Part 4: Deploy your app to Heroku (2 Points)

You will use the same process as used in Homework 2, except you will be committing and deploying your files from your doctor-who-ui folder.

Part 5: Verify that you’re done

Part 1 (2 Points)
2 pts	routes.js	The routes.js file was updated according to the instructions in part 1 (run the tests and they should pass).
Part 2 (20 Points)
2 pt	Doctor List	A list of doctors appears on the left-hand side when the page loads.
4 pts	Doctor Detail	When you click any of the doctors: Details about the doctor are displayed (2 pts) Details about the doctor's corresponding companions are displayed (2 pts)
6 pts	Create Doctor	Clicking the add doctor button shows a "Create Doctor" form (1 pt). There is data validation and error handling (2 pts). When the form is submitted, a valid POST request is sent to the /doctors/ endpoint (1 pt). A successful post shows the new doctor in the detail panel an redraws the left-hand panel (1 pt). Cancel button hides all of the details panels so that only the list is showing (1 pt).
6 pts	Edit Doctor	Clicking the edit button next to the doctor shows a pre-populated "Edit" form (1 pt). There is data validation and error handling (2 pts). When the form is submitted, a valid PATCH request is sent to the /doctors/:id endpoint (1 pt). A successful patch redraws the left-hand panel and replaces the form panel with the detail panel (1 pt). Cancel button hides form and shows detail panel again (1 pt).
2 pts	Delete Doctor	Asks the user if they really want to delete: If confirmed, a valid DELETE request is sent to the /doctors/:id endpoint (1 pt) If delete successful, detail panels hidden and left-hand panel updated (0.5pts) If user changes their mind and doesn't want to delete, their choice is honored (0.5pts)
Part 3 (2 Points)
2 pts	Heroku Server	Heroku server successfully deployed.

Part 6: Submit to Canvas

When you’re done, you should submit the following to Canvas:

A zip file that contains your public directory and your updated routes.js file.
A link to your live Heroku web server (just paste the link in as a comment on Canvas).
A list of your collaborators, if applicable (just list them in the comments section of Canvas).
Also, tell us if you attempted the extra credit (totally optional).

CS396: Spring 2021

Intro to Web Development