Random Quote machine Structural issue

I think the tester for this project is broken. I havn’t included the functionality of the button to coincide with the challenge yet it tells me I have completed some tests.

Also I’m slightly confused with the structure as it is flagging up wrong but seems to flow correctly.

Any help with this would be appreciated so I can crack on

Your id attribute is not correct it should be #new-quote


And while fixing that would make you pass all but the layout test the app doesn’t really do what is asked for.

You are supposed to get a new quote when clicking the button and the text and author should be updated with the new quote. Also, the tweet button is supposed to have the quote in the href value so it can be posted to twitter.


As an aside, you need to fix the link to font awesome. And for later versions, the classes for the icon have changed.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<i class="fa-brands fa-twitter"></i>

//thank you the tweet update was useful. I’ve been working on this a bit more and figured out some better code although it still doesn’t work. Could you give me some advice on this javascript functionality please//

Random Quote machine (codepen.io)

Your current function:

function selectRandomQuote() {
  const quotes = [
    "Believe you can and you're halfway there",
    "You don't have to be great to      start, but you have to start to be great.",
    "May you live every day of your life.",
    "If things start happening, don't worry, don't stew, just go right along and you'll start happening too.",
    "Your imagination is your preview of life's coming attractions."
  ];
  const indexOfQuote = Math.floor(Math.random() * quotes.length);
  const quo = quotes[indexOfQuote].text;
  const auth = quotes[indexOfQuote].author;
  text.innerHTML = quo;
  author.innerHTML = "~ " + auth;
}

What do you think the following two are doing? Describe in your own words.

  const quo = quotes[indexOfQuote].text;
  const auth = quotes[indexOfQuote].author;

For example say indexOfQuote is equal to 1, what do you think the two lines of code above do?

Hi Randall

I’ve now changed the function code to a simpler method where I have first retrieved a random number. I’m now struggling to apply this number to match the quote within the array at the index given from the random number obtained. Do you have any tips?

Random Quote machine (codepen.io)

With your current code, integerOfQuote contains a random index of the quotes array. In general, how do you reference an array element based on an index?

For example, if I wanted to access the 2nd quote in your quotes array, what code would that be?

Once you figure that out, then you can simply use integerOfQuote instead of the index to access a random quote from the quotes array. Keep in mind this will not help you get an author of a quote since you have not yet created a data structure to store the authors of each quote. You could use an array of the same length and put the author of each quote in the same order as the quotes and then access them with integerOfQuote also.

I personally would rename integerOfQuote to randomIndex as that is really what it is.

Thank you
I’m drawn towards using .map()
Should quotes.map(indexRandom) return a string or is there more to this? It doesn’t mutate the string which is great but the index value is still an issue

You can not use the map method here. I suggest reading more about the map method to validate what I am saying. I also suggest you review this challenge if you have not already done so. It will show you how to access array elements if you have an index (and you do have an index in that variable.

Thank you I’ve found a solution. Now just to tidy up the div to stop the layout moving when the text changes