[SOLVED] Please help with random quote generator

JavaScript
#1

Can anyone possibly help?

my code pen is:

I am trying to complete the random quote generator with vanilla js but i’m really stuck.

  1. Am i returning the data in the correct format, as far as i know i am returning a json object, (i’m using a gist from my own git page: https://gist.githubusercontent.com/char502/abbd19ab22972fa732a33f1bfda04ad8/raw/a4582b8aa8b634a99d773bd66232cca1702952f3/Quotes,json is that ok, will it work?) is it coming back in the correct format or do i have to change it to something else before i can work with it - for random quote generating purposes - (it looks ok when i console.log(obj)? -
    i.e. what form should it be in and how can i refer to it in the code further down (i.e. the random variable and the click event)

  2. Is a click event listener the correct way to go to get a working button for this?

  3. How do i make the button return random quotes, at the moment i can only get it to return the last quote in the list

Sorry if these seem stupid questions, i’m really new at this and trying to improve my vanilla js

Many Thanks,

Charlotte

#2

Seems so. I can see quotes in the console.

You’ve already got the quotes in an array. Just move the code you have to randomly select one into your event handler and you’ll be able to get a new quote each time the button is clicked.

It is, but presumably you’ll want the event to be bound to the button instead of the whole document. As already mentioned, make sure the function picks a new quote each time it’s run or it won’t look like it’s doing anything at all.

You’re very close. To start, you don’t need the forEach call after you get the data. data is an array of quotes, and you only need one at a time. Keep that variable where it is and move all your other code out of the forEach method. Change your randomization code to select from your data instead of just one quote.

var random = <<change me>>[Math.floor(Math.random() * quote.length)];
#3

Great, thanks for the tips, i’ll take a look :slight_smile:

#4

My app does random video with random segments along with random audio and pictures.

It can also play random groupings of text pics audio and video.

For random text…
The quotes to randomly play have a “break” record at beginning and end.

I generate a random number that is between the beginning and end of the text file.
It does a search for 3 lines then if no match try again…

Random kicks ass. And makes stuff far more interesting…

#5

Hi,

I think i sort of almost have it, i just can’t seem to make my quote button work, Can anyone help, i feel like i’m really close but just can’t get this final piece in place and it’s driving me crazy?

#6

OMG - it’s working - I just had a quick re-read of your tips PortableStick, realised i’d missed something and now it’s working thanks again for your help :smiley:

1 Like
#7

Looks great! :+1::+1:

#8

I could be wrong, but I think it would look the same if you removed the following properties from you CSS body definition:

   background-position: center center;
   min-height: 100%;
   min-width: 100%; 
   position: absolute; 
   top: 0;
   left: 0; 
   display: block;

Also, you could remove the following from your .container-fluid:

   left: 0;
   right: 0;
#9

yes, you’re probably right, I was experimenting with different styles before settling on the final design so there’s likely to be some redundant CSS in there - thanks for taking a look :slight_smile: