first

Author: wagslane

README.md

@@ -1,3 +1,19 @@
-# fcc-learn-http-assets
+# Assets for "Learn HTTP" on FreeCodeCamp
 
-This is a snapshot of the code samples for the "Learn HTTP" course on Boot.dev at the time the video for FreeCodeCamp was released on YouTube.
+This is a snapshot of the code samples for the ["Learn HTTP" course](https://boot.dev/courses/learn-http) on [Boot.dev](https://boot.dev) at the time the video for FreeCodeCamp was released on YouTube. If you want the most up-to-date version of the code, please visit the official [Boot.dev course](https://boot.dev/courses/learn-http). Otherwise, if you're looking for the files used in the video, you're in the right place!
+
+* [Course code samples](/course)
+* [Project steps](/project)
+
+## A note on the API used in the course coding assignments
+
+The API used throughout the course is a *live* API hosted on Boot.dev. There is a *chance* that the API will change in the future, which will of course break any code that interacts with it, but it's unlikely. If it does change, I'll update this repo with an explanation.
+
+The base URL of the API is: `https://api.boot.dev/v1/courses_rest_api/learn-http/`
+
+## Alternative APIs you can practice with
+
+If you want to practice writing client-side HTTP code against a live API, here are some alternative options I would recommend:
+
+* [PokeAPI](https://pokeapi.co/)
+* [Star Wars API](https://swapi.dev/)

course/1-why-http/exercises/1-web-communication/code.js

@@ -0,0 +1,33 @@
+const apiKey = generateKey()
+const items = await getItemData()
+
+logItems()
+
+// don't touch below this line
+
+async function getItemData() {
+  const response = await fetch('https://api.boot.dev/v1/courses_rest_api/learn-http/items', {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      'X-API-Key': apiKey,
+      'Content-Type': 'application/json'
+    }
+  })
+  return response.json()
+}
+
+function generateKey() {
+  const characters = 'ABCDEF0123456789'
+  let result = ''
+  for (let i = 0; i < 16; i++){
+    result += characters.charAt(Math.floor(Math.random() * characters.length))
+  }
+  return result
+}
+
+function logItems(items) {
+  for (const item of items) {
+    console.log(item.name)
+  } 
+}

course/1-why-http/exercises/1-web-communication/complete.js

@@ -0,0 +1,33 @@
+const apiKey = generateKey()
+const items = await getItemData()
+
+logItems(items)
+
+// don't touch below this line
+
+async function getItemData() {
+  const response = await fetch('https://api.boot.dev/v1/courses_rest_api/learn-http/items', {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      'X-API-Key': apiKey,
+      'Content-Type': 'application/json'
+    }
+  })
+  return response.json()
+}
+
+function generateKey() {
+  const characters = 'ABCDEF0123456789'
+  let result = ''
+  for (let i = 0; i < 16; i++){
+    result += characters.charAt(Math.floor(Math.random() * characters.length))
+  }
+  return result
+}
+
+function logItems(items) {
+  for (const item of items) {
+    console.log(item.name)
+  } 
+}

course/1-why-http/exercises/1-web-communication/expected.txt

@@ -0,0 +1,20 @@
+
+Healing Potion
+
+Light Leather
+
+Padded Leather
+
+Haste Potion
+
+Leather Scraps
+
+Copper Ore
+
+Copper Bar
+
+Iron Ore
+
+Iron Bar
+
+Gold Ore

course/1-why-http/exercises/1-web-communication/readme.md

@@ -0,0 +1,28 @@
+# Communicating on the web
+
+Instagram would be pretty terrible if you have to manually copy your photos to your friend's phone when you wanted to share them. Modern applications need to be able to communicate information *between devices* over the internet.
+
+* Gmail doesn't just store your emails in variables on your computer, it stores them on computers in their data centers
+* You don't lose your slack messages if you drop your computer in a lake, those messages exist on Slack's [servers](https://en.wikipedia.org/wiki/Web_server)
+
+## How does web communication work?
+
+When two computers communicate with each other, they need to use the same rules. An English speaker can't communicate verbally with a Japanese speaker, similarly, two computers need to speak the same language to communicate.
+
+This "language" that computers use is called a [protocol](https://en.wikipedia.org/wiki/Communication_protocol). The most popular protocol for web communication is [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview), which stands for Hypertext Transfer Protocol.
+
+## Fantasy Quest
+
+The text-based adventure game *Fantasy Quest* we've been working on in previous courses has come a long way, but we still have a lot to improve.
+
+As it stands, "Fantasy Quest" is a game that's local to our player's devices. If they lose their computer, they have to start over! We want players to have their save data stored on our [servers](https://en.wikipedia.org/wiki/Web_server), and we want our players to be able to interact with each other over the internet. Let's use HTTP to do that!
+
+## Assignment 
+
+I wrote the `getItemData()` function for you. It retrieves items from Fantasy Quest's servers via HTTP.
+
+I also wrote a `logItems()` function for you, call it with the `items` variable we are getting back from the `getItemData()` as a parameter. 
+
+## Tip
+
+Notice how none of the data that is logged to the console was generated within our code! That's because the data we retrieved is being sent over the internet from our servers via HTTP. Don't worry, we'll explain more about that later.

course/1-why-http/exercises/2-requests-responses/multiple_choice.json

@@ -0,0 +1,7 @@
+{
+  "question": "Which comes first?",
+  "answers": [
+    "HTTP Request",
+    "HTTP Response"
+  ]
+}

course/1-why-http/exercises/2-requests-responses/readme.md

@@ -0,0 +1,10 @@
+# HTTP Requests and Responses
+
+At the heart of HTTP is a simple request-response system. The "requesting" computer, also known as the ["client"](https://en.wikipedia.org/wiki/Client_(computing)), asks another computer for some information. That computer, ["the server"](https://en.wikipedia.org/wiki/Server_(computing)) sends back a response with the information that was requested.
+
+![requests and responses HTTP](https://i.imgur.com/ReFw6nN.png)
+
+We'll talk about the specifics of how the "requests" and "responses" are formatted later. For now, just think of it as a simple question-and-answer system.
+
+* Request: "What are the items in the Fantasy Quest game?"
+* Response: `A list of the items in the Fantasy Quest game`.

course/1-why-http/exercises/3-http-in-websites/multiple_choice.json

@@ -0,0 +1,9 @@
+{
+  "question": "Website data is requested via which internet communication protocol?",
+  "answers": [
+    "HTTP",
+    "UDP",
+    "RabbitMQ",
+    "PSQL"
+  ]
+}

course/1-why-http/exercises/3-http-in-websites/readme.md

@@ -0,0 +1,7 @@
+# HTTP powers websites
+
+As we discussed, [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview), or Hypertext Transfer Protocol, is a [protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol) designed to transfer information between computers.
+
+There are other protocols for communicating over the internet, but HTTP is the most popular and is *particularly great for websites and web applications*. Each time you visit a website, your browser is making an HTTP request to that website's server. The server responds with all the text, images, and styling information that your browser needs to render its pretty website!
+
+![website image](https://i.imgur.com/EflKJzq.jpg)

course/1-why-http/exercises/3-urls/code.js

@@ -0,0 +1,35 @@
+const apiKey = generateKey()
+const itemURL = 'https://api.boot.dev/v1/courses_rest_api/learn-http/items'
+
+const items = await getData()
+
+logItems(items)
+
+// don't touch below this line
+
+async function getData(url) {
+  const response = await fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      'X-API-Key': apiKey,
+      'Content-Type': 'application/json'
+    }
+  })
+  return response.json()
+}
+
+function generateKey() {
+  const characters = 'ABCDEF0123456789'
+  let result = ''
+  for (let i = 0; i < 16; i++){
+    result += characters.charAt(Math.floor(Math.random() * characters.length))
+  }
+  return result
+}
+
+function logItems(items) {
+  for (const item of items) {
+    console.log(item.name)
+  } 
+}

course/1-why-http/exercises/3-urls/complete.js

@@ -0,0 +1,35 @@
+const apiKey = generateKey()
+const itemURL = 'https://api.boot.dev/v1/courses_rest_api/learn-http/items'
+
+const items = await getData(itemURL)
+
+logItems(items)
+
+// don't touch below this line
+
+async function getData(url) {
+  const response = await fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      'X-API-Key': apiKey,
+      'Content-Type': 'application/json'
+    }
+  })
+  return response.json()
+}
+
+function generateKey() {
+  const characters = 'ABCDEF0123456789'
+  let result = ''
+  for (let i = 0; i < 16; i++){
+    result += characters.charAt(Math.floor(Math.random() * characters.length))
+  }
+  return result
+}
+
+function logItems(items) {
+  for (const item of items) {
+    console.log(item.name)
+  } 
+}

course/1-why-http/exercises/3-urls/expected.txt

@@ -0,0 +1,20 @@
+
+Healing Potion
+
+Light Leather
+
+Padded Leather
+
+Haste Potion
+
+Leather Scraps
+
+Copper Ore
+
+Copper Bar
+
+Iron Ore
+
+Iron Bar
+
+Gold Ore

course/1-why-http/exercises/3-urls/hints.md

@@ -0,0 +1,3 @@
+## Hint
+
+Don't use the `itemURL` directly in the call to `fetch`. Pass it in as a parameter to `getData`.

course/1-why-http/exercises/3-urls/readme.md

@@ -0,0 +1,11 @@
+# HTTP URLs
+
+A URL, or [Uniform Resource Locator](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL), is essentially the address of another computer, or "server" on the internet. Part of the URL specifies how to reach the server, and part of it tells the server what information we want - but more on that later.
+
+For now, it's important to understand that a URL represents a piece of information on another computer that we want access to. We can get access to it by making a *request*, and reading the *response* that the server replies with.
+
+## Assignment
+
+As we talked about in the last assignment, the `getItemData()` function was requesting a resource from a server to ask for some information about the items in the "Fantasy Quest" game.
+
+I've updated the code to be more flexible. The `getData()` function now takes a URL as a parameter. You'll notice that if you run the code in its current state you get a strange error about "unexpected tokens". That's because we're not getting a proper HTTP response. After all, we aren't making our request to a valid URL. Fix the code so that the `getData` function requests the `itemURL`. 

course/1-why-http/exercises/4-http-urls/multiple_choice.json

@@ -0,0 +1,7 @@
+{
+  "question": "HTTP is the only protocol that uses URLs",
+  "answers": [
+    "False",
+    "True"
+  ]
+}

course/1-why-http/exercises/4-http-urls/readme.md

@@ -0,0 +1,7 @@
+# Using URLs in HTTP
+
+The `http://` at the beginning of a [website URL](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL) specifies that the `http` protocol will be used for communication.
+
+![http in url](https://i.imgur.com/6jiaXBn.png)
+
+Other communication protocols use URLs as well, (hence "Uniform Resource Locator"). That's why we need to be specific when we're making HTTP requests by prefixing the URL with `http://`

course/1-why-http/exercises/5-requests-responses-quiz/multiple_choice.json

@@ -0,0 +1,7 @@
+{
+  "question": "Does the example code run on a client or a server?",
+  "answers": [
+    "Client",
+    "Server"
+  ]
+}

course/1-why-http/exercises/5-requests-responses-quiz/readme.md

@@ -0,0 +1,31 @@
+# Requests and Responses Quiz
+
+![requests and responses HTTP](https://i.imgur.com/ReFw6nN.png)
+
+* A "client" is a computer making an HTTP request
+* A "server" is a computer responding to an HTTP request
+* A computer can be a client, a server, both, or neither. "Client" and "server" are just words we use to describe what computers are doing within a communication system.
+* Clients send requests and receive responses
+* Servers receive requests and send responses
+
+## Example code
+
+```js
+const itemURL = 'https://api.boot.dev/v1/courses_rest_api/learn-http/items'
+
+const items = await getData(itemURL)
+
+console.log(items)
+
+async function getData(url) {
+  const response = await fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      'X-API-Key': 'Testing',
+      'Content-Type': 'application/json'
+    }
+  })
+  return response.json()
+}
+```

course/1-why-http/exercises/5a-requests-responses-quiz/multiple_choice.json

@@ -0,0 +1,7 @@
+{
+  "question": "The computer responding to requests at the URL 'https://api.boot.dev' is a...",
+  "answers": [
+    "Server",
+    "Client"
+  ]
+}

course/1-why-http/exercises/5a-requests-responses-quiz/readme.md

@@ -0,0 +1,31 @@
+# Requests and Responses Quiz
+
+![requests and responses HTTP](https://i.imgur.com/ReFw6nN.png)
+
+* A "client" is a computer making an HTTP request
+* A "server" is a computer responding to an HTTP request
+* A computer can be a client, a server, both, or neither. "Client" and "server" are just words we use to describe what computers are doing within a communication system.
+* Clients send requests and receive responses
+* Servers receive requests and send responses
+
+## Example code
+
+```js
+const itemURL = 'https://api.boot.dev/v1/courses_rest_api/learn-http/items'
+
+const items = await getData(itemURL)
+
+console.log(items)
+
+async function getData(url) {
+  const response = await fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    headers: {
+      'X-API-Key': 'Testing',
+      'Content-Type': 'application/json'
+    }
+  })
+  return response.json()
+}
+```