Foundations -> Practice Sample challenge

Notes on this sample 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 parts as this sample challenge, but the exact tasks will vary. For example, you might be asked to:

  • write a different kind of SQL query
  • utilize GET data in Part 2
  • 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 sample version.

• During the live coding interview you may:

  • google search for reference material from the web.
  • examine the database interactively.
  • send GET and POST requests to your express server for debugging / confirmation.

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 take a team name as a parameter, and return a promise resolving to the names of that team's colors (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 a page with color names 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
• 10: Rendered page includes the names of the colors for the team in question

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 "[teamName] Colors" (where [teamName] 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)