How do I match the author to the quote in the Random Quote generator project?

1

When generating random quotes I want the author of the quote to match the quote. How do I do this. My javascript is below and if you want to see my project for a better understanding, here is the link: -https://codepen.io/colinsteidtmann/full/XVaaxx/

(*Note that it’s coded to match screen sizes 320px)

var quotes = [
  'Life can only be understood backwards; but it must be lived forwards','Beware the barrenness of a busy life','If you try, you risk failure. If you don’t, you ensure it','Life is a spell so exquisite that everything conspires to break it','If you do what you need, you’re surviving. If you do what you want, you’re living','Life isn’t about waiting for the storm to pass...It’s about learning to dance in the rain','Life is not a problem to be solved, but a reality to be experienced','Life is not always a matter of holding good cards, but sometimes, playing a poor hand well'
];

var author = [
  '-Søren Kierkegaard','-Socrates','-Anonymous','-Emily Dickinson','-Unknown','-Vivian Greene','-Soren Kierkegaard','-Jack London'
]

function newQuote(){
  var randomNumber = Math.floor(Math.random()*(quotes.length));
  var correctAuthor = /*??? This is what I need help with */

document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]
  document.getElementById('authorDisplay').innerHTML = author[correctAuthor]
}
2

Rethink your data structure. Review some of what you have learned to see what applies.

3

Assuming the order of the authors corresponds to the order of the quotes, all you need to do is reuse randomNumber as the index of the author array.

However, Separating data that corresponds to other data and then rejoining it later is always a risky strategy. For a small dataset like this, it probably doesn’t matter, but you should get into the habit of thinking carefully about how to structure your data. In this case, consider having a single array of objects, each of which contains a quote and an author.

As a side note, you should also separate your data from its presentation. “-” is part of the presentation, not the authors’ names. Add it in later by concatenating (or perhaps by using a ::before pseudo-element in the CSS).

2 Likes
4

Create an object that represents your data:

{
author: “quote”
}

5

Still not the best way to represent the data. The authors are part of the data, not keys. Also, one author might have more than one quote, and names with spaces and special characters would cause problems unless you enclosed them in quotation marks.

6

Well, i agree. Just to keep things simple (for this task) you may consider every quote as an object:

{
    author: "name",
    quoteBody: "text"
}

And then just have an array of those objects. I mean, without considering relations and stuff. Whatever, i just make accent on simple representation just to move along with the task itself. I agree that you should consider things you mention, anyway.

1 Like
8

but aren’t you supposed to get the quote from the json which you pull by api, not to hardcode them

i have personally used this https://talaikis.com/api/quotes/random/ one, since it’s free and easy to use, the quotes themselves are largely meh though

9

You don’t have to get quotes from an API. At least that’s what I assumed.

1 Like
10

There is nothing in the challenge that says you must use an API. Hardcoding is a perfectly cromulent solution. There are other challenges where APIs are required.

2 Likes