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:
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!