For this one, I am probably creating some kind of syntax error that I am unaware of. After spending at least 2 hours on it, I decided to ask for help. I hope to get past this part so I can actually practice making MY OWN webpage for a project I am doing.
The exercise is:
GET FETCH CA exercise
I am having trouble implementing the exercise when it comes to the instructions below (number 6 in the steps)
Inside the success callback function, create a conditional statement that checks if the ok property of the response object evaluates to a truthy value. If so, log response.json() to the console. Run your code.
Paste https://goo.gl/cjyLB1 into the input field and click “Expand”.
If everything worked correctly, there should be a Promise in the console. Click the arrow to expand the Promise and notice that at one point, the PromiseStatus was pending, and now it is resolved. Clicking the down arrow next to PromiseValue will show the response from the Google URL Shortener API - the information that we requested! We’ll learn how to access this information in the next exercise.
Here is the code for the final answer:
// Include data for accessing Google APIs
const apiKey = '<Your API Key>';
const url = 'https://www.googleapis.com/urlshortener/v1/url';
// Some page elements
const $inputField = $('#input');
const $expandButton = $('#expand');
const $shortenButton = $('#shorten');
const $responseField = $('#responseField');
// AJAX functions
function expandUrl() {
const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;
fetch(urlToExpand).then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Request failed!');
}, networkError => console.log(networkError.message));
};
function shortenUrl() {
};
function expand() {
$responseField.empty();
expandUrl();
return false;
};
function shorten() {
$responseField.empty();
shortenUrl();
return false;
};
$expandButton.click(expand);
$shortenButton.click(shorten);
Here is my actual code, where I need help with:
// Include data for accessing Google APIs
const apiKey = <your API key>;
const url = 'https://www.googleapis.com/urlshortener/v1/url'
// Some page elements
const $inputField = $('#input');
const $expandButton = $('#expand');
const $shortenButton = $('#shorten');
const $responseField = $('#responseField');
// AJAX functions
function expandUrl() {
const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;
fetch(urlToExpand).then(response => {response => {
if (response.ok) {
return response.json();
});
};
function shortenUrl() {
};
function expand() {
$responseField.empty();
expandUrl();
return false;
};
function shorten() {
$responseField.empty();
shortenUrl();
return false;
};
$expandButton.click(expand);
$shortenButton.click(shorten);
As far as I can tell, I am doing the exact same thing as the given answer. I have also tried using console.log and the exercise still does not let me past.
I believe that understanding these concepts is important if I want to make my own website - so even though I could skip it, I would rather understand and do it right through doing myself.