You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**If you'd like to test the starter code (and test your changes throughout) double click `index.html`. Refresh the page to view changes as you make them.**
55
52
53
+
56
54
## 3. Open the project in your code editor.
57
55
58
-
You'll see one file called `index.html` and folder called `js`. `index.html` is the file that constitutes the homepage of the website. The `js` folder is where all **Javascript** files will be kept. As of now, we only have one Javascript file, `main.js`, which is our main script for the website. There is also a **style.css** file that contains some minor styling for the webpage. Feel free to ignore or play around with it!
56
+
You'll see one file called `index.html` and folder called `js`. `index.html` is the file that constitutes the homepage of the website. The `js` folder is where all **Javascript** files will be kept. As of now, we only have one Javascript file, `main.js`, which is our main script for the website. There is also a **style.css** file that contains some minor styling for the webpage. Feel free to ignore it or play around with it!
59
57
60
58
## 4. Check out the Advice Slip API
61
59
62
60
[Click on this link to go to the API](http://api.adviceslip.com/) we will be using tonight.
63
61
64
-
While there are hundreds of APIs to use on the internet, many are considered "consumption-only" and only allow you to make `GET` requests. In order to make `POST`, `PUT`, or `DELETE` requests, many APIs require some kind of authentification. That will not be covered in this tutorial but we highly encourage you to explore such APIs like Twitter or Spotify's API!
62
+
While there are hundreds of APIs to use on the internet, many are considered "consumption-only" and only allow you to make `GET` requests. In order to make `POST`, `PUT`, or `DELETE` requests, many APIs require some kind of authentication. That will not be covered in this tutorial but we highly encourage you to explore such APIs like Twitter or Spotify's API!
65
63
Check out the **Random Advice** section of the API. The request we will be making is `GET` and the url is what will be making the request to get the data.
66
64
Now look at the **Slip Object** section. This tells us what fields make up the object that will be returned in the reponse. We will use these fields to access the advice string so we can display it.
67
65
@@ -80,7 +78,7 @@ At line 1 write: `const url = 'https://api.adviceslip.com/advice'`
80
78
This url will change depending on what information you're trying to get. For this project we want random advice but we could also get just one specific piece of advice. We would do this by calling `https://api.adviceslip.com/advice/{slip_id}` instead.
81
79
82
80
Next, we want to make our request. We do this by calling `fetch(url)`. This method is part of *another* API, called [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). Fetch provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.
83
-
`fetch()` provides a logical way to fetch resources asynchronously across the network. It's API inception!!
81
+
`fetch()` provides a logical way to get resources asynchronously across the network. It's API inception!!
84
82
85
83
Inside the `getAdvice()` function after `confetti.start();` we want to write:
86
84
```
@@ -93,7 +91,7 @@ fetch(url)
93
91
```
94
92
95
93
96
-
`response => response.json()` transforms the data into a JSON object and `function(advice)` handles displaying the data. We access the advice (string) of the JSON object by calling advice.slip.advice. This becomes text that we now can put inside our modal element, which we do by writing `document.getElementById('advice').innerHTML = adviceData;`
94
+
`response => response.json()` transforms the data into a JSON object and `function(advice)` handles displaying the data. We access the advice (string) of the JSON object by calling `advice.slip.advice`. This becomes text that we now can put inside our modal element, which we do by writing `document.getElementById('advice').innerHTML = adviceData;`
97
95
98
96
Finally refresh the page and watch the magic happen!
0 commit comments