Foundations -> Practice practice challenge

Notes on this Practice challenge (please read carefully)

This is intended to give you an idea of the type of tasks you will be asked to do for the live coding interview.
You may choose either Pug or EJS as a template engine (here and in the live coding interview).
The live coding interview will have all the same sections as this practice exam, but the exact tasks will vary. For example, you might be asked to:
- write a different kind of SQL query
- utilize GET data in the Express GET Route section
- remove an element from the DOM
Refer to extra/topics.md file in this repo for a list of topics covered to understand the possible range of topics.
The "subject" of the interview will also be different (for example, hotel reservations instead of sports teams).
The actual live coding interview will likely have a smaller amount of coding than this practice version.
During the live coding interview you may:
- google search for reference material from the web.
- use the command line and/or the browser console to debug your work.
- use Postico or psql to examine the database.

Part 1: SQL

Note: For this and the following sections, please be sure to read and follow the installation instructions in the README.md for the corresponding part-x folder.

Node and PostgreSQL

Create a function in db.js called getTeamColors that uses pg-promise. The function should get the names of all colors for a given team (the raw result from pg-promise is fine -- it's not necessary to process the result to make, say, an array of strings).

5: Function accepts the name of a team as a parameter
15: Function executes a query that returns the given team's associated colors
10: Function returns a promise which resolves to the result of the query

Part 2: Express

GET route

Create a GET route for /:teamname/colors that renders colors for a particular team. Use the getTeamColors function provided in db.js.

5: Route uses GET
10: Route uses getTeamColors to get the necessary data
10: Route renders team_colors.pug OR team_colors.ejs template with the teams from the db

POST route

Create a POST route for /teams/add that receives JSON data and adds a new team to the database. Use the addTeam function provided in db.js. Example JSON POST data:

{
  "teamName": "LG Engineers",
  "city": "Oakland"
}

5: Route uses POST
10: Route accesses POST data
10: Route uses addTeam to add the team to the database
10: Successful adding of the team returns 200 status and JSON with the key teamName (and the appropriate value)
10: Unsuccessful adding of the team returns 400 status and JSON containing the key message with an error message as the value.
10: Learner demonstrates POST route functionality using Postman, curl, or the like as a client.

Part 3: Front-End

HTML and CSS

Add a yellow banner across the top of the team_colors.pug OR team_colors.ejs page with a title " Colors" (where is the name of the team whose colors are being displayed).

5: The banner displays on the page
5: The banner spans the entire page width
5: The title is centered within the banner
5: The background of the banner is yellow
10: The styling is defined in the public/team_colors.css file (not in the HTML file)

DOM Manipulation

When the user clicks the "Add Color" button, add a new color to the list of colors on the page. The new color to be added will be entered in the text box. Note: There is no need to update the database or communicate with the server in any way.

10: The "Add Color" button has an event listener on click
10: The color list has another item after button click
10: The new color list item contains the contents of the text input box
10: JavaScript is contained in public/team_colors.js (not in the HTML file)

bonnie/README.md