├── .learn ├── test ├── helpers.js └── indexTest.js ├── .canvas ├── src └── index.js ├── .github └── workflows │ └── canvas-sync-ruby-update.yml ├── .gitignore ├── package.json ├── index.html ├── db.json ├── index.css └── README.md /.learn: -------------------------------------------------------------------------------- 1 | languages: 2 | - javascript 3 | -------------------------------------------------------------------------------- /test/helpers.js: -------------------------------------------------------------------------------- 1 | const chai = require("chai"); 2 | global.expect = chai.expect; 3 | const jsdom = require("mocha-jsdom"); 4 | 5 | jsdom({}); 6 | -------------------------------------------------------------------------------- /.canvas: -------------------------------------------------------------------------------- 1 | --- 2 | :lessons: 3 | - :id: 223931 4 | :course_id: 6638 5 | :canvas_url: https://learning.flatironschool.com/courses/6638/assignments/223931 6 | :type: assignment 7 | - :id: 263284 8 | :course_id: 7550 9 | :canvas_url: https://learning.flatironschool.com/courses/7550/assignments/263284 10 | :type: assignment 11 | -------------------------------------------------------------------------------- /test/indexTest.js: -------------------------------------------------------------------------------- 1 | // The code below ensures that students who are using CodeGrade will get credit 2 | // for the code-along in Canvas; you can disregard it. 3 | 4 | require("./helpers.js"); 5 | 6 | describe("", () => { 7 | describe("", () => { 8 | it("Test passing", () => { 9 | return true; 10 | }); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | let addToy = false; 2 | 3 | document.addEventListener("DOMContentLoaded", () => { 4 | const addBtn = document.querySelector("#new-toy-btn"); 5 | const toyFormContainer = document.querySelector(".container"); 6 | addBtn.addEventListener("click", () => { 7 | // hide & seek with the form 8 | addToy = !addToy; 9 | if (addToy) { 10 | toyFormContainer.style.display = "block"; 11 | } else { 12 | toyFormContainer.style.display = "none"; 13 | } 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /.github/workflows/canvas-sync-ruby-update.yml: -------------------------------------------------------------------------------- 1 | name: Sync with Canvas Ruby v2.7 2 | 3 | on: 4 | push: 5 | branches: [master, main] 6 | paths: 7 | - 'README.md' 8 | 9 | jobs: 10 | sync: 11 | name: Sync with Canvas 12 | 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v2 17 | 18 | - name: Set up Ruby 19 | uses: ruby/setup-ruby@v1 20 | with: 21 | ruby-version: 2.7 22 | 23 | - name: Install github-to-canvas 24 | run: gem install github-to-canvas 25 | 26 | # Secret stored in learn-co-curriculum Settings/Secrets 27 | - name: Sync from .canvas file 28 | run: github-to-canvas -a -lr 29 | env: 30 | CANVAS_API_KEY: ${{ secrets.CANVAS_API_KEY }} 31 | CANVAS_API_PATH: ${{ secrets.CANVAS_API_PATH }} 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/node 2 | 3 | .DS_Store 4 | 5 | ### Node ### 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directories 23 | node_modules 24 | jspm_packages 25 | 26 | # Optional npm cache directory 27 | .npm 28 | 29 | # Optional REPL history 30 | .node_repl_history 31 | 32 | # Learn-specific .results.json 33 | .results.json 34 | 35 | # Ignore bundler config. 36 | /.bundle 37 | 38 | # Ignore the default SQLite database. 39 | /db/*.sqlite3 40 | /db/*.sqlite3-journal 41 | 42 | # Ignore all logfiles and tempfiles. 43 | /log/* 44 | !/log/.keep 45 | /tmp 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phase-1-practice-toy-tale", 3 | "version": "1.0.0", 4 | "description": "\"practice responding to user events and using fetch requests\"", 5 | "main": "index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "test": "mocha --timeout 5000" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/learn-co-curriculum/phase-1-practice-toy-tale.git" 15 | }, 16 | "keywords": [ 17 | "flatiron school", 18 | "javascript", 19 | "user events", 20 | "fetch requests" 21 | ], 22 | "author": "Flatiron School", 23 | "license": "CC-BY-NC-SA-4.0", 24 | "bugs": { 25 | "url": "https://github.com/learn-co-curriculum/phase-1-practice-toy-tale/issues" 26 | }, 27 | "homepage": "https://github.com/learn-co-curriculum/phase-1-practice-toy-tale#readme", 28 | "dependencies": { 29 | "chai": "^4.2.0", 30 | "jsdom": "^9.0", 31 | "mocha": "5.2.0", 32 | "mocha-jsdom": "~1.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Toy Tale 6 | 7 | 8 | 9 |
10 | toy-header 14 |
15 | 16 |
17 |
18 |

Create a toy!

19 | 20 | 27 |
28 | 35 |
36 | 42 |
43 |
44 |

45 | Andy needs your help! 46 |

47 | 48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | { 2 | "toys": [ 3 | { 4 | "id": 1, 5 | "name": "Woody", 6 | "image": "http://www.pngmart.com/files/3/Toy-Story-Woody-PNG-Photos.png", 7 | "likes": 5 8 | }, 9 | { 10 | "id": 2, 11 | "name": "Buzz Lightyear", 12 | "image": "http://www.pngmart.com/files/6/Buzz-Lightyear-PNG-Transparent-Picture.png", 13 | "likes": 8 14 | }, 15 | { 16 | "id": 3, 17 | "name": "Mr. Potato Head", 18 | "image": "https://vignette.wikia.nocookie.net/universe-of-smash-bros-lawl/images/d/d8/Mr-potato-head-toy-story.gif/revision/latest?cb=20151129131217", 19 | "likes": 3 20 | }, 21 | { 22 | "id": 4, 23 | "name": "Slinky Dog", 24 | "image": "https://www.freeiconspng.com/uploads/slinky-png-transparent-1.png", 25 | "likes": 4 26 | }, 27 | { 28 | "id": 5, 29 | "name": "Rex", 30 | "image": "https://static.wikia.nocookie.net/disney/images/5/56/Profile_-_Rex.jpeg/revision/latest?cb=20190313050619", 31 | "likes": 1 32 | }, 33 | { 34 | "id": 6, 35 | "name": "Bo Peep", 36 | "image": "http://4.bp.blogspot.com/_OZHbJ8c71OM/Sog43CMFX2I/AAAAAAAADEs/0AKX0XslD4g/s400/bo.png", 37 | "likes": 2 38 | }, 39 | { 40 | "id": 7, 41 | "name": "Hamm", 42 | "image": "https://cdn140.picsart.com/244090226021212.png?r1024x1024", 43 | "likes": 0 44 | }, 45 | { 46 | "id": 8, 47 | "name": "Little Green Men", 48 | "image": "http://www.pngmart.com/files/3/Toy-Story-Alien-PNG-File.png", 49 | "likes": 1 50 | } 51 | ] 52 | } -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: monospace; 4 | } 5 | 6 | #toy-header { 7 | display: flex; 8 | justify-content: center; 9 | background: #515DA2; 10 | opacity: .8; 11 | height: 7rem; 12 | padding: 1rem; 13 | } 14 | 15 | #toy-header img { 16 | height: 6rem; 17 | width: auto; 18 | } 19 | 20 | #toy-collection { 21 | margin: 2rem; 22 | } 23 | 24 | .card { 25 | text-align: center; 26 | border: grey solid 1px; 27 | padding: 1rem; 28 | width: 15rem; 29 | height: 25rem; 30 | display: inline-grid; 31 | margin: 1rem 2rem; 32 | box-shadow: 3px 4px #e04b52 33 | } 34 | 35 | .toy-avatar { 36 | justify-self: center; 37 | height: 12rem; 38 | width: auto; 39 | } 40 | 41 | button { 42 | position: relative; 43 | background-color: #e04b52; 44 | border: none; 45 | border-radius: 5px; 46 | height: 3rem; 47 | width: max-content; 48 | color: whitesmoke; 49 | font-size: 18px; 50 | justify-self: center; 51 | } 52 | 53 | button:hover { 54 | background-color: whitesmoke; 55 | border: #e04b52 solid 1px; 56 | color: #e04b52; 57 | } 58 | 59 | .container { 60 | padding: 1rem; 61 | width: stretch; 62 | height: auto; 63 | display: none; 64 | background: #515DA2; 65 | opacity: .8; 66 | } 67 | 68 | .add-toy-form { 69 | width: 80% 70 | } 71 | 72 | .submit { 73 | position: relative; 74 | background-color: #e04b52; 75 | border-radius: 5px; 76 | height: 2rem; 77 | width: max-content; 78 | color: whitesmoke; 79 | font-size: 18px; 80 | justify-self: center; 81 | font-family: monospace; 82 | margin: 3px; 83 | } 84 | 85 | .submit:hover { 86 | background-color: whitesmoke; 87 | border: #e04b52 solid 1px; 88 | color: #e04b52; 89 | } 90 | 91 | 92 | .input-text { 93 | border-radius: 5px; 94 | height: 2rem; 95 | width: 60%; 96 | font-size: 18px; 97 | font-family: monospace; 98 | margin: 3px; 99 | } 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Toy Tale 2 | 3 | ## Learning Goals 4 | 5 | - Set up event listeners to respond to user events 6 | - Use `fetch()` to make a "GET" request, then render the returned toys to the 7 | DOM 8 | - Use `fetch()` to make a "POST" request to create a new toy, then add it to the 9 | DOM 10 | - Use `fetch()` to make a "PATCH" request that updates an existing toy, then 11 | render the updated information to the DOM 12 | 13 | ## Introduction 14 | 15 | You've got a friend in need! Your friend Andy recently misplaced all his toys! 16 | Let's write an app that helps Andy keep track of them. For this lab, you will 17 | need to pull together everything you've learned about manipulating the DOM, 18 | responding to events, and communicating with the server. Specifically, you will 19 | need to: 20 | 21 | 1. Access the list of toys from an API (mocked using JSON Server) and render 22 | each of them in a "card" on the page 23 | 2. Hook up a form that enables users to add new toys. Create an event listener 24 | so that, when the form is submitted, the new toy is persisted to the database 25 | and a new card showing the toy is added to the DOM 26 | 3. Create an event listener that gives users the ability to click a button to 27 | "like" a toy. When the button is clicked, the number of likes should be 28 | updated in the database and the updated information should be rendered to the 29 | DOM 30 | 31 | The final product should look like this: 32 | 33 | ![Toy Tale working app](https://curriculum-content.s3.amazonaws.com/phase-1/communicating-with-the-server/toy_tale.gif) 34 | 35 | Note that this lab **does not contain tests**. You will be working from the 36 | requirements described below and verifying that your code is working correctly 37 | in the browser. 38 | 39 | Once you're done, be sure to commit and push your code up to GitHub, then submit 40 | the assignment using CodeGrade. Even though this practice lab does not have 41 | tests, it must still be submitted through CodeGrade in order to be marked as 42 | complete in Canvas. 43 | 44 | ## Start Up the Server 45 | 46 | All of the toy data is stored in the `db.json` file. You'll want to access this 47 | data using a JSON server. Run `json-server --watch db.json` to start the server. 48 | 49 | > **Note**: For users of the [Live Server VSCode extension][live-server], if the 50 | > page is reloading when you initiate a fetch request, you'll need to set up 51 | > some additional configuration for Live Server to play nicely with 52 | > `json-server`. Follow the steps in [this gist][live-server settings] (you'll 53 | > only need to do this once), then come back to this lesson. 54 | 55 | [live-server]: 56 | https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 57 | [live-server settings]: 58 | https://gist.github.com/ihollander/cc5f36c6447d15dea6a16f68d82aacf7 59 | 60 | This will create a server storing all of our lost toy data with restful routes 61 | at `http://localhost:3000/toys`. You can also check out the information for each 62 | individual toy at `http://localhost:3000/toys/:id`. 63 | 64 | > **Note:** we are using `:id` here as a variable value that indicates the path 65 | > to a specific toy. To navigate (or send a request) to that path, the `id` 66 | > number will be inserted into the URL in place of `:id`, e.g., 67 | > `http://localhost:3000/toys/1` 68 | 69 | Open a second tab in the terminal then open `index.html` in the browser and take 70 | a look at the page. The CSS has all been provided for you so that, when you 71 | create the cards to display each toy, you just need to add a CSS class to style 72 | them. 73 | 74 | If you click on the "Add a new toy!" button, you'll see that it exposes a form 75 | where the user can submit information for a new toy. To re-hide the form, click 76 | the button a second time. If you take a look inside `index.js`, you'll see that 77 | the code implementing that functionality has been provided for you. You will be 78 | writing the code to wire up the "Create Toy" button. 79 | 80 | ## Instructions 81 | 82 | ### Fetch Andy's Toys 83 | 84 | On the `index.html` page, there is a `div` with the `id` "toy-collection." 85 | 86 | When the page loads, make a 'GET' request to fetch all the toy objects. With the 87 | response data, make a `
` for each toy and add it to the 88 | toy-collection `div`. 89 | 90 | ### Add Toy Info to the Card 91 | 92 | Each card should have the following child elements: 93 | 94 | - `h2` tag with the toy's name 95 | - `img` tag with the `src` of the toy's image attribute and the class name 96 | "toy-avatar" 97 | - `p` tag with how many likes that toy has 98 | - `button` tag with a class "like-btn" and an id attribute set to the toy's id 99 | number 100 | 101 | After all of that, the toy card should look something like this: 102 | 103 | ```html 104 |
105 |

Woody

106 | 107 |

4 Likes

108 | 109 |
110 | ``` 111 | 112 | ### Add a New Toy 113 | 114 | When a user submits the toy form, two things should happen: 115 | 116 | - A `POST` request should be sent to `http://localhost:3000/toys` and the new 117 | toy added to Andy's Toy Collection. 118 | - If the post is successful, the toy should be added to the DOM without 119 | reloading the page. 120 | 121 | In order to send a POST request via `fetch()`, give the `fetch()` a second 122 | argument of an object. This object should specify the method as `POST` and also 123 | provide the appropriate headers and the JSON data for the request. The headers 124 | and body should look something like this: 125 | 126 | ```js 127 | headers: 128 | { 129 | "Content-Type": "application/json", 130 | Accept: "application/json" 131 | } 132 | 133 | body: JSON.stringify({ 134 | "name": "Jessie", 135 | "image": "https://vignette.wikia.nocookie.net/p__/images/8/88/Jessie_Toy_Story_3.png/revision/latest?cb=20161023024601&path-prefix=protagonist", 136 | "likes": 0 137 | }) 138 | ``` 139 | 140 | For examples, refer to the [documentation][fetch docs]. 141 | 142 | ### Increase a Toy's Likes 143 | 144 | When a user clicks on a toy's like button, two things should happen: 145 | 146 | - A `patch` request (i.e., `method: "PATCH"`) should be sent to the server at 147 | `http://localhost:3000/toys/:id`, updating the number of likes that the 148 | specific toy has 149 | - If the patch is successful, the toy's like count should be updated in the DOM 150 | without reloading the page 151 | 152 | The `patch` request enables us to **update** an existing toy. The request will 153 | look very similar to our "POST" request **except** that we need to include the 154 | `id` of the toy we're updating in the path. 155 | 156 | To get this working, you will need to add an event listener to each toy's "Like" 157 | button. When the button is clicked for a toy, your code should: 158 | 159 | 1. capture that toy's id, 160 | 2. calculate the new number of likes, 161 | 3. submit the `patch` request, and 162 | 4. update the toy's card in the DOM based on the `Response` returned by the 163 | fetch request. 164 | 165 | The headers and body should look something like this: 166 | 167 | ```js 168 | headers: 169 | { 170 | "Content-Type": "application/json", 171 | Accept: "application/json" 172 | } 173 | 174 | body: JSON.stringify({ 175 | "likes": newNumberOfLikes 176 | }) 177 | ``` 178 | 179 | The `patch` method updates the property or properties included in the body of a 180 | `fetch` request but leaves the remaining properties as they are. For our 181 | example, the `likes` property will be updated by our `patch` request but the 182 | `id`, `name`, and `image` properties will remain unchanged. 183 | 184 | If your request isn't working, make sure your headers and keys match the 185 | [documentation][fetch docs]. 186 | 187 | > **HINT**: You will be creating two event listeners for this lab. The first one 188 | > will be on the "Create Toy" button, which is provided in the app's 189 | > `index.html` file. The second one, however, will be on the "Likes" button on 190 | > each individual toy card. Given that the toy cards will be rendered to the DOM 191 | > dynamically from the `Response` returned by the `fetch` "GET" request, think 192 | > about **when** it makes sense to add the event listener to each toy's "Like" 193 | > button. 194 | 195 | ## Conclusion 196 | 197 | Once you get everything working, take a moment to appreciate how far you've 198 | come. You now have the skills needed to respond to user events, persist changes 199 | to a database, and manipulate the DOM in response. You have created your first 200 | fully-functioning web app that combines all three of the pillars. 201 | 202 | Congratulations! 203 | 204 | [fetch docs]: 205 | https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options 206 | --------------------------------------------------------------------------------