Random Quote Generator and Tweet Button

Hello,

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

Tweet:

  • 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.

Link:

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 ?

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

@divyanshtiwari:

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

Hey,

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

@divyanshtiwari:

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){
  return(
    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){
  return(
    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;
   

}

Results;

  • 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

Problems:

  • 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?