Help...Random quote machine

1

Hello everybody,
I have a challenge regarding the random quote machine. I did not use API as I generated my favourite quote.
Here is how I achieved it.
I created an array of objects. Each object is made up of the author’s name and author’s quotes (in array form).
Example:

let quotes = [
{author: "John"},
{quote: [quote1,quote2, quote3...]},

{author: "Kunle"},
{quote: [quote1,quote2, quote3...]}
]

const grabQuote = function(){
  for(let authorQuotes of quotes){
    getRandomAuthorQuote = Math.floor(Math.random() * quotes.length);
    selectRandomAuthor = quotes[getRandomAuthorQuote].author;
    selectRandomQuote = quotes[getRandomAuthorQuote].quote;
    for (let quote of selectRandomQuote){
      return `${quote} ...${selectRandomAuthor}` 
    }
  }
}

let showQuote = document.querySelector(".quote");
showQuote.textContent = grabQuote();


let quoteButton = document.querySelector("button")
quoteButton.addEventListener("click", function(){
   showQuote.innerHTML = grabQuote();
})

The quote will output An author and one of his quotes.

My challenge:

  1. I would like to style the author’s name differently from his quote using CSS. How can I achieve this as both the author’s name and the quote are generated by the same function? When I tried to generate them separately, I got an unmatching author with a quote. Because they are randomized independently.
2

It would be easier to help if we could see your entire code.

But why not have a separate did for the quote and a separate one for the author? Then you could apply whatever CSS you want.

3

I see you are returning only a string literal template. You can achieve what you want one of two ways, however either way would require that you define your CSS classes in a separate sylesheet, or a <style> on your page somewhere.

You can create elements in your function using the document.createElement() method, or you can build your elements in the HTML file. If you create your elements in JavaScript, you will need to append them to a container somewhere on the page. If you update the innerText property of predefined HTML, you will need to target those elements with document.querySelector().

It would be easier to write out some HTML elements in your HTML file beforehand, and just update the innerText property with your author and quote from the function.

4 
let quotes = [{
    author: "Abdullah ibn Masud",
    quote: ["A silent dua is seventy times better than a loud one.",
      "Be people who are constantly reviving their hearts, wearing shabby garments, lights that illuminate the darkness, be unknown to those on earth yet known to the inhabitants of the heavens.",
      "The believer will not attain comfort until he meets Allah",
      "You are living in a time in which desires are controlled by the truth. However, there will come a time in which the truth will be molded by desires. We seek refuge with Allah from that time.",
      "Do not scatter the Quran like inferior dates and do not chant it quickly as with poetry. Stop at its wonders, move the hearts with it, and let not your concern be the end of the surah.",
    ],
  },

  {
    author: "Abdullah ibn Mubarak",
    quote: ["You are in greater need of a little manners than a great deal of knowledge.",
      "The stain of ink on clothes is the trademark of scholars.",
      "Those of you who have the most knowledge, should also be those who have the most fear.",
      "Sins slowly kill the heart, and abandoning sins brings life to the heart.",
      "If I were to backbite anyone it would be my parents, for they are most deserving of my good deeds.",
    ],
  },

  {
    author: "Abu Bakr Siddique",
    quote: ["Allah bless him who helps his brother.",
      "Death is the easiest of all things after it, and the hardest of all things before it.",
      "Be good to others, that will protect you against evil.",
      "The greatest truth is honesty, and the greatest falsehood is dishonesty.",
      "Muslims should live like brothers.",
    ],
  },

  {
    author: "Fakhr al-Din al-Razi",
    quote: ["No greater grace can be granted by human beings to one another than that which parents grant to their offspring.",
      "The greatest blessing after the bounties of the Creator is the blessing of parents.",
    ],
  },

  {
    author: "Fudayl ibn Iyad",
    quote: ["What Allah wants from you is your intention and will.",
      "The action, if it is sincere and not correct then it is not accepted. It is only accepted when it is both sincere and correct.",
      "The believer overlooks the faults of others, admonishes others, and gives good advice.",
      "Admiration is part of imaan and envy is part of hypocrisy.",
      "If you mix with people, then mix with good character for it only invites to good. Do not mix with bad character, for it only invites to evil.",
    ],
  },

  {
    author: "Ibn Al-Jawzi",
    quote: ["Whoever lacks patience and allows his desires (hawa) to lead his mind has then made the follower be followed and the led a leader.",
      "This world is a bridge and a bridge should not be taken as a home",
      "Know that if people are impressed with you, in reality they are impressed with the beauty of Allah's covering of your sins.",
      "If you find a darkness in your heart after you sinned, know that in your heart there is a light, because of this light you felt the darkness.",
      "We seek refuge with Allah from starting any action without basing it on knowledge and reason.",
    ],
  },
];

const grabQuote = function(){
  for(let authorQuotes of quotes){
    getRandomAuthorQuote = Math.floor(Math.random() * quotes.length);
    selectRandomAuthor = quotes[getRandomAuthorQuote].author;
    selectRandomQuote = quotes[getRandomAuthorQuote].quote;
    for (let quote of selectRandomQuote){
      return `${quote} ...${selectRandomAuthor}` 
    }
  }
}

let showQuote = document.querySelector(".quote");
showQuote.textContent = grabQuote();


let quoteButton = document.querySelector("button")
quoteButton.addEventListener("click", function(){
   showQuote.innerHTML = grabQuote();
})
5

One trick you could try is to return a new object from your function containing the quote author and quote message. The function would return the object wherever you call it. That would require the least amount of change to your function as it is.

let randomQuote = grabQuote();
// randomQuote.author;
// randomQuote.quote;

You can then use the returned object your queries (which you should split up between your author and quote containers)

let showAuthor = /* query Selector */;
showAuthor.innerText = randomQuote.author;
1 Like
6

That’s what I found difficult. I will try the suggestion and get back. Thanks a lot…for the quick response:

7

I try it and get back. Thanks a lot for the help!

8

Thank you very much, the code worked!