Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Jessica Ng committed Oct 18, 2023
1 parent 01d17a8 commit 0a35092
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 29 deletions.
8 changes: 4 additions & 4 deletions asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"files": {
"main.css": "/static/css/main.982e87cf.css",
"main.js": "/static/js/main.3e47732d.js",
"main.js": "/static/js/main.dd4a55a7.js",
"static/media/hw2.md": "/static/media/hw2.e5e1b67c13433dba9a61.md",
"static/media/hw6.md": "/static/media/hw6.2a5bf675e12761303b2c.md",
"static/media/hw6.md": "/static/media/hw6.630cadf15a7ed94aa828.md",
"static/media/hw3.md": "/static/media/hw3.e7fe2e6d12bd2aa82fa4.md",
"static/media/hw8.md": "/static/media/hw8.b1287d1ca768ba50dd3f.md",
"static/media/hw4.md": "/static/media/hw4.3cd721eabf7429cff5aa.md",
Expand All @@ -16,10 +16,10 @@
"static/media/lab2.md": "/static/media/lab2.d2b57759e405362ffd8f.md",
"index.html": "/index.html",
"main.982e87cf.css.map": "/static/css/main.982e87cf.css.map",
"main.3e47732d.js.map": "/static/js/main.3e47732d.js.map"
"main.dd4a55a7.js.map": "/static/js/main.dd4a55a7.js.map"
},
"entrypoints": [
"static/css/main.982e87cf.css",
"static/js/main.3e47732d.js"
"static/js/main.dd4a55a7.js"
]
}
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Cubstart is a web/mobile development course for beginner developers. Whether you need project experiences to kickstart your resume, or if you have a desire to build but don’t know where to start, Cubstart is the course for you."/><link rel="apple-touch-icon" href="/favicon.ico"/><link rel="manifest" href="/manifest.json"/><title>Cubstart</title><script defer="defer" src="/static/js/main.3e47732d.js"></script><link href="/static/css/main.982e87cf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Cubstart is a web/mobile development course for beginner developers. Whether you need project experiences to kickstart your resume, or if you have a desire to build but don’t know where to start, Cubstart is the course for you."/><link rel="apple-touch-icon" href="/favicon.ico"/><link rel="manifest" href="/manifest.json"/><title>Cubstart</title><script defer="defer" src="/static/js/main.dd4a55a7.js"></script><link href="/static/css/main.982e87cf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
1 change: 0 additions & 1 deletion static/js/main.3e47732d.js.map
View file

This file was deleted.

6 changes: 3 additions & 3 deletions static/js/main.3e47732d.js → static/js/main.dd4a55a7.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions static/js/main.3e47732d.js.LICENSE.txt → static/js/main.dd4a55a7.js.LICENSE.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
*/

/**
* @remix-run/router v1.9.0
* @remix-run/router v1.5.0
*
* Copyright (c) Remix Software Inc.
*
Expand All @@ -82,7 +82,7 @@
*/

/**
* React Router DOM v6.16.0
* React Router DOM v6.10.0
*
* Copyright (c) Remix Software Inc.
*
Expand All @@ -93,7 +93,7 @@
*/

/**
* React Router v6.16.0
* React Router v6.10.0
*
* Copyright (c) Remix Software Inc.
*
Expand Down
1 change: 1 addition & 0 deletions static/js/main.dd4a55a7.js.map
View file

Large diffs are not rendered by default.

39 changes: 22 additions & 17 deletions static/media/hw6.2a5bf675e12761303b2c.md → static/media/hw6.630cadf15a7ed94aa828.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Quizlet-ish (Part 1): Make a Flashcard API

## Ddoski needs your help!
Ddoski wants to build a flashcard website, but so far he's only built the front-end (the webpage with HTML and CSS)! His project partner, Oski, was supposed to be working on the API, but he has gone MIA :(. Ddoski sees he started on some parts of the code. Can you finish it?
Ddoski wants to build a flashcard website, but so far he's only built the frontend (the webpage with HTML and CSS)! His project partner, Oski, was supposed to be working on the API, but he has gone MIA :(. Ddoski sees he started on some parts of the backend code. Can you finish it?

_[Download skeleton code.](assets/hw6/fa23-hw6-skeleton.zip)_

# Part 1: Set up your Project
First, download [Node.js](https://nodejs.org/en/download/).

After extracting your skeleton code zip file, you will need to run the following commands in your terminal in the fa23-hw6-skeleton folder. We recommend using the VSCode terminal, which you can open by going to Terminal > New Terminal from the menu at the top. An alternative is you can open up Terminal on Mac or GitBash on Windows and change directories (eg. cd Desktop) into the hw6 folder.
After extracting your skeleton code zip file, you will need to run the following commands in your terminal in the fa23-hw6-skeleton folder. We recommend using the VSCode terminal, which you can open by going to Terminal > New Terminal from the menu at the top. An alternative is you can open up Terminal on Mac or GitBash on Windows and change directories (e.g. cd Desktop) into the fa23-hw6-skeleton folder.

Run these commands in your terminal:
```bash
Expand All @@ -31,14 +31,14 @@ Your folder should look like this:


# Part 2: Make a Flashcard API!
If you don't remember how to use Express, you might want to look at a simple guide [here](https://expressjs.com/en/starter/basic-routing.html) or at the [lecture slides](https://docs.google.com/presentation/d/1A7mK0etb0R4Jm3CJkXKHRWdmWKRgjjcOkT-JYMgELQE/edit?usp=sharing).
If you don't remember how to use Express, you might want to look at a simple guide [here](https://expressjs.com/en/starter/basic-routing.html) or at the [Lecture 6 Slides](https://docs.google.com/presentation/d/1A7mK0etb0R4Jm3CJkXKHRWdmWKRgjjcOkT-JYMgELQE/edit?usp=sharing).

Before you start, you should know what we're trying to achieve. Here are all the functionalities your API should have.
- Add cards with "/new" endpoint
- Retrieves cards with "/cards" endpoint
- Retrieve a specific card by their id with "/cards/ID_HERE" endpoint
- Retrieve a specific card by their id with "/cards/:index" endpoint
- Retrieves a random card with "/random" endpoint
- Deletes a specific card by their id with "/delete/ID_HERE" endpoint
- Deletes a specific card by their id with an endpoint that you'll write

_Go to **index.js**, and fill in Questions 1-4 with Ddoski's help! We will be testing these endpoints you create in Part 3. :)_

Expand All @@ -48,18 +48,23 @@ When you're done, run this line in your terminal to run your API.
```bash
node index.js
```
You **MUST** download the Postman desktop app [here](https://www.postman.com/downloads/) because Postman on a browser will not make requests to localhost. We will use Postman Desktop to send requests to your API.

**You have to rerun "node index.js" in your terminal every time you change something in index.js. Remember to save the file in VSCode. You may have to use Ctrl+C in the terminal to cancel the currently running program, then run "node index.js" again.**
You <mark>**MUST**</mark> download the Postman desktop app [here](https://www.postman.com/downloads/) because Postman on a browser will not make requests to localhost. We will use the Postman desktop app to send requests to your flashcards API and make sure that it works as intended.

## Add 3 flashcards with "/new" endpoint
**Every time you change something in index.js, you have to rerun "node index.js" in your terminal.** To do this, follow these steps:
1. Save the file in VSCode.
2. Type Ctrl+C in the terminal to cancel the currently running program.
3. Run "node index.js" again to restart your server.

<br><br><br>

## Add 3 flashcards with the "/new" endpoint
Make 3 POST requests to the /new endpoint. Here is an example:

<video width="100%" controls>
<source src="/assets/hw6/postman.mov" type="video/mp4">
</video>

We need to set the request to POST instead of GET. In the Body tab under the space for the URL, we select "raw" and then "JSON" from the dropdown menu. Then, we send a JSON with "front" and "back" set to the front and the back text of the flashcard respectively.
Set the request to POST instead of GET. In the Body tab, select "raw" and then "JSON" from the dropdown menu. Then, send a JSON with "front" and "back" set to the front and the back text of the flashcard respectively.

</br></br></br>
## Retrieve cards with "/cards" endpoint
Expand All @@ -68,8 +73,8 @@ We should be able to retrieve all our flashcards too. Don't forget to set the re
<img src="/assets/hw6/postman-4.PNG" style="width: 100%; padding: 20px 0;"/>

</br></br></br>
## Retrieve a specific card by their id with "/cards/ID_HERE" endpoint
We see that sending a GET request to "/cards/2" retrieves the card at index 2 in the flashcards array (unless your array has less than 3 cards).
## Retrieve a specific card by their id with "/cards/:index" endpoint
Sending a GET request to "/cards/2" should retrieve the card at index 2 in the flashcards array (unless your array has less than 3 cards).

<img src="/assets/hw6/postman-5.PNG" style="width: 100%; padding: 20px 0;"/>

Expand All @@ -81,16 +86,16 @@ We might want to randomize a card so that we can learn the content better!

</br></br></br>

## Delete a specific card by their id with "/delete/ID_HERE" endpoint
## Delete a specific card by its id
In the example below, we have deleted the card at index 1 and our API responded with the updated flashcards array after deletion occured.
<img src="/assets/hw6/postman-7.PNG" style="width: 100%; padding: 20px 0;"/>
</br>

# Submission
To submit the homework folder, you have to zip it first. **DO NOT INCLUDE THE "node_modules" FOLDER**. You can delete "node_modules" from your project folder. You can always run *npm install* in the terminal to re-install the relevant modules.
For HW 6, <mark>**only submit your index.js file**</mark>. This is because node_modules is quite a large folder and might some time to upload. Zip your index.js file and submit to Gradescope!

**To zip a folder:**
_**Windows:** Right-click the folder **hw6-skeleton**, select (or point to) Send to, and then select Compressed (zipped) folder._
_**macOS:** Control-click the folder **hw6-skeleton** or tap it using two fingers, then choose Compress from the shortcut menu._
**To zip a folder/file:**
_**Windows:** Right-click the folder **fa23-hw6-skeleton**, select (or point to) Send to, and then select Compressed (zipped) folder._
_**macOS:** Control-click the folder **fa23-hw6-skeleton** or tap it using two fingers, then choose Compress from the shortcut menu._

Upload the .zip file to [Gradescope](https://www.gradescope.com/) :)

0 comments on commit 0a35092

Please sign in to comment.