Random Quote Generator and Tweet Button


I have two problems that I am trying to solve for the tweet button and a general misunderstanding with the generator.


  • I am trying to use the Bootstrap Awesome Icons, but it is not showing up on the screen
  • I am trying to place the button slightly left of the (-) indicator by the author but still on the same row as it is on now (or it might be called the bottom-left corner of author) but I am having difficulty doing so. I am using the Bootstrap Column system trying to accomplish this

Random Quote Generator:

  • I got an API from Kutipan for generating the quotes. I am having difficulty connecting the API to the website. I am probably doing something stupid in the basics (JavaScript hasn’t been my greatest subject so far). Any help in that area would be appreciated.


Thank you for your time,

Open the JS console in your browser and then load your application. You’ll see an error message in there that you need to fix.

lol I just made a JS quote object, filled it with quotes and used it

Hey , Im sorry but did you just copy all the code from some source ? Also, are you sure that your entire app is not missing something important ?

I see the error code for the generator, I don’t see anything about the twitter symbol


In the HTML portion:

  • I got the links from the lessons that said that they had to be there for them to work
    • The rest of the code I typed

The CSS portion:

  • The imports were from codepen’s back editor
    • I have been doing some trial and error with things like centering the box on the page by going to the example and see how they did it
    • Everything else, I wrote

The JS portion:

  • I got the code from the source I referenced in the notes
  • I tried going by the example given for what I thought was relevant, but right now I am just trying to get the API figured out since that is covered in a later section
  • Everything else I wrote

I am not quite sure what you mean by very important. I do know that the JS part is not even halfway done, but I can’t figure out how to reference this API. After I get that, then I can write the functions for the starting quote, the new quote button, and the tweet button.

The error I am seeing is:

Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

1 Like

I didn’t see that, but I imported jQuery as one of the inputs

Yes, you did, but not in the correct order. As the error message says, jQuery must be loaded first.

1 Like

I think I changed it around, both in the back editor and the import listing (since there was no change when I just changed the back end portion) but I still don’t see a change

No errors are showing up in my console anymore, but nothing changed


I am trying to use the Bootstrap Awesome Icons, but it is not showing up on the screen

Use <i class="fab fa-twitter"></i>
or Font Awesome 4

1 Like

:smile: IT WORKS, THANKS :smile:

1 Like


Maybe I should just make an array full of quotes and authors and be done with this project, lol :laughing:

(tomorrow though I am done with this for tonight :slightly_smiling_face: )

1 Like

Okay, so I am almost done with my second attempt (I think), but I am getting stuck once again with my functions.

function getQuote(myArray){
  get = Math.floor(Math.random(myArray)*myArray.length+1);
  quote = get.quote;
  author = get.author;

function displayQuote(getQuote){
    text = getQuote.quote;
    anon = getQuote.author;

Where am I going wrong?

When i console.log(getQuote) it returns with my New Quote button.
I know that the second one doesn’t work because of the first, but I would like to fix it if it’s wrong if I can

Hmm how do you think it supposed to work?
you can use global variables( without const/let/var ) but it’s a bad practice

 function getQuote(myArray){
  get = Math.floor(Math.random(myArray)*myArray.length+1);  //get random number say 6 
  quote = get.quote; // 6.quote? is that  what you tried todo?  
  author = get.author;

function displayQuote(getQuote){
    text = getQuote.quote,
    anon = getQuote.author;

Math random() is not expecting any arguments
try to console.log parts of your array without functions

console.log(getQuote) logs your button because getQuote is global variable, getQuote=== window.getQuote===//element with id getQuote

How To Access Elements in the DOM

After some time reading and debugging this is where I am at.

function getQuote() {
return Math.floor(Math.random() * Math.floor(myArray.length));}

function test(getQuote) {
  random = getQuote();
   quote = myArray[random].quote;



  • I have been able to get the function getQuote() to produce a random number.
  • When I console.log myArray with the number generated I get the Object that it should come up with.
  • When I add .quote to that same console.log I get the quote that I am trying to get.
    • I tried myArray[a number][1] and got a button


  • I have tried using global functions instead of the test function and the console told me that myArray was not defined.
  • I tried quote = myArray[getQuote(with and without the “()”)] and got different results, but both were still wrong.
  • I have tried multiple other variations but was still unsuccessful.

This is probably the closest I gotten it to work. What should I do next?