In the previous exercise, you created the boilerplate code for making a POST request using fetch()
and .then()
. In this exercise, you’re going to update that boilerplate code to allow you to shorten a URL using the Rebrandly URL Shortener API.
If you haven’t already created a Rebrandly API key, read through the Rebrandly sign up guide:
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 if asking 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
Assign apiKey
to your Rebrandly API key as a string.
If you do not assign the correct key, you will not see the proper results in the steps afterwards.
Inside the code block of shortenUrl()
, create a const
named urlToShorten
and assign it inputField.value
.
urlToShorten
will keep the value of what is being typed into the input field.
Please note, you will be working inside shortenUrl()
for the remainder of this exercise.
Underneath urlToShorten
, create another const
named data
, and assign it to the result of calling the method JSON.stringify()
with {destination: urlToShorten}
as an argument.
The reason for creating data
is to prepare the information needed to send in the body.
Below data
, call the fetch()
function. Pass it 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. Create a property with the key method
and the value 'POST'
.
In the same object, create another property. The key for this property is headers
and the value will be another object.
Assign headers
the value of another object listed below:
{ 'Content-type': 'application/json', 'apikey': apiKey }
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
.
Setting up this information now will make chaining .then()
in the next exercise much easier!