My suggestion is to go to this link Direct Message API features as they have a tutorial on how to set it up. I also have a tip use your console to see the Twitter’s API response (when you get it working) as it will be as simple as copying and editing the line in your own javascript.
That’s what I did with my Nasa javascript file:
'use strict';
/* I didn't show it even though it's a public key for NASA's APIs:
const nasaAPI = "PRIVATE";
//const nasaAPI = "PRIVATE";
const nasaUrl = "https://api.nasa.gov/planetary/apod?api_key=";
const nasaImage = document.querySelector('#apod');
const nasaImageHD = document.querySelector('#apodHD');
const nasaInfo = document.querySelector('#nasaInfo');
const requestUrl = nasaUrl + nasaAPI;
const nasaVideo = document.querySelector('#video');
/* Success function utilizing FETCH */
const nasaUISuccess = function (parsedData) {
console.log('Nasa Data', parsedData);
//console.log(parsedData.media_type);
if (parsedData.media_type === "video") {
nasaImage.style.display = "none";
nasaVideo.setAttribute('src', `${parsedData.url}&autoplay=1`);
} else {
nasaVideo.style.display = "none";
nasaImage.setAttribute('src', parsedData.url);
nasaImageHD.setAttribute('href', parsedData.hdurl);
}
nasaImage.setAttribute('title', parsedData.title);
nasaInfo.textContent = parsedData.explanation;
};
/* If nasa API did not load correctly */
const nasaUIError = function (error) {
console.log("Database Table did not load", error);
nasaVideo.style.display = "none";
nasaImage.setAttribute('src', 'assets/images/Orion212_Volskiy_960.jpg');
nasaImageHD.setAttribute('href', 'assets/images/Orion212_Volskiy_5574.jpg');
nasaImage.setAttribute('title', 'A 212-Hour Exposure of Orio');
nasaInfo.textContent = "The constellation of Orion is much more than three stars in a row. It is a direction in space that is rich with impressive nebulas. To better appreciate this well-known swath of sky, an extremely long exposure was taken over many clear nights in 2013 and 2014. After 212 hours of camera time and an additional year of processing, the featured 1400-exposure collage spanning over 40 times the angular diameter of the Moon emerged. Of the many interesting details that have become visible, one that particularly draws the eye is Barnard's Loop, the bright red circular filament arcing down from the middle. The Rosette Nebula is not the giant red nebula near the top of the image -- that is a larger but lesser known nebula known as Lambda Orionis. The Rosette Nebula is visible, though: it is the red and white nebula on the upper left. The bright orange star just above the frame center is Betelgeuse, while the bright blue star on the lower right is Rigel. Other famous nebulas visible include the Witch Head Nebula, the Flame Nebula, the Fox Fur Nebula, and, if you know just where to look, the comparatively small Horsehead Nebula. About those famous three stars that cross the belt of Orion the Hunter -- in this busy frame they can be hard to locate, but a discerning eye will find them just below and to the right of the image center.";
};
/*
* Throw error response if something is wrong:
*/
const handleErrors = function (response) {
if (!response.ok) {
throw (response.status + ' : ' + response.statusText);
}
return response.json();
};
/* create FETCH request */
const createRequest = function (url, succeed, fail) {
fetch(url)
.then((response) => handleErrors(response))
.then((data) => succeed(data))
.catch((error) => fail(error));
};
createRequest(requestUrl, nasaUISuccess, nasaUIError);
//const nasaUrl = "https://api.nasa.gov/mars-photos/api/v1/rovers/Opportunity/photos?sol=1&camera=PANCAM&api_key=";
//const nasaUrl = "https://api.nasa.gov/mars-photos/api/v1/manifests/opportunity?api_key=";
I used Vanilla JS, but the principle is the same.
