In the previous exercise, we walked through the boilerplate code for making a POST request using fetch()
and .then()
. In this exercise, we’re going to use that boilerplate code to shorten a URL using the Rebrandly URL Shortener API.
We will need a Rebrandly API key. To do this, read through the Rebrandly sign up guide to set up your API.
Keep in mind, while it’s ok to use your API key in these exercises, you should not share your key with anyone (not even to ask a question in the forums)! Also, if you reset the exercise at any point, you will have to paste in your API key again at the top.
Instructions
Set the value of the apiKey
variable to your Rebrandly API key as a string.
If a correct key is not assigned, proper results will not be seen in the steps afterwards.
We will make our POST request inside the shortenUrl() function.
Inside the code block of shortenUrl()
, create a const
variable named urlToShorten
and assign it inputField.value
.
urlToShorten
will keep the value of what is being typed into the input field.
Note that we will be working inside shortenUrl()
for the remainder of this exercise.
Underneath the urlToShorten
declaration, create another const
variable named data
and assign it to the stringified version of {destination: urlToShorten}
. We can use the JSON.stringify()
method to do this.
The data
variable will be used to send the information, which needs to be in string format, to the request body.
Below our data
variable declaration, call the fetch()
function. Pass url
as its first argument and an empty object as its second argument.
Now it’s time to add some properties to the empty object that you just created. Add a property with the key method
and the value 'POST'
.
In the same object, add another property. The key for this property is headers
and the value will be the following object:
{ 'Content-type': 'application/json', 'apikey': apiKey }
We will use this to connect to the API.
In that same object that has the properties method
and headers
, add another property. The key is named body
and the value will be data
.
We’ve now created an object containing all the information we need for our POST request!