Create Daily Random Quote in Blogger using JavaScript

These days, many Bloggers want to display random quotes on their blogs. That you came across this article proves that you are one of them. If you really want to display random daily quotes on your blog, then with a few lines of JavaScript, you can display random daily quotes on your blog.

First of all, let's first understand the logic of daily random quotes with JavaScript. After that, then we start coding it.

The JavaScript Logic for Random Daily Quotes

Daily random quotes are a number of quotes that will appear each day. Every day, people will read a different quote. For example, today they read a quote from Noam Chomsky, tomorrow they might read a quote from Jeremy Harmer. For that, we must of course save a number of quotes and will display one quote per day.

So that the quote that appears is a different quote every day, we need a reference and the best reference, in my opinion, is the date. In a month, no date is the same. Assuming that a month consists of a maximum of 31 days, then we need at least 31 quotes. These quotes are stored in a JavaScript Array. After that, the quotes that appear on the blog are quotes that are in the same array position as the date.

After creating a JavaScript array containing 31 quotes, we need to create a JavaScript function whose job is to find the date (number) and display the quote that is at the position of that number in the array. As simple as that.

The downside of this logic is that some quotes won't appear in certain months. For example, because February has only 28 days, the quotes 29-31 will not appear.

The Script

To help you, here I share 31 quotes already stored in an array. It should be noted that each array starts with the number 0 while there is no date with the number 0. Therefore, the value of the array 0 is empty.

const quotes = [
    "",
    "\"If you're teaching today what you were teaching five years ago, either the field is dead or you are.\"<br />~Noam Chomsky",
    "\"The only thing necessary for the triumph of evil is for good men to do nothing.\"<br />~Edmund Burke",
    "\"Everyone, left to his own devices, forms an idea about what goes on in language which is very far from the truth.\"<br />~Ferdinand de Saussure",
    "\"Even the interpretation and use of words involves a process of free creation.\"<br />~Noam Chomsky",
    "\"A linguistic system is a series of differences of sound combined with a series of differences of ideas.\"<br />~Ferdinand de Saussure",
    "\"A language presupposes that all individual users possess the organs.\"<br />~Ferdinand de Saussure",
    "\"The good life is one inspired by love and guided by knowledge.\"<br />~Bertrand Russell",
    "\"Changes and progress very rarely are gifts from above. They come out of struggles from below.\"<br />~Noam Chomsky",
    "\"If you talk to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart.\"<br />~Nelson Mandela",
    "\"The language of friendship is not words, but meanings.\"<br />~Henry David Thoreau",
    "\"To have another language is to possess a second soul.\"<br />~Charlemagne",
    "\"The art of communication is the language of leadership.\"<br />~James Humes",
    "\"Human language appears to be a unique phenomenon, without significant analogue in the animal world.\"<br />~Noam Chomsky",
    "\"The fundamental cause of troubles is that in the modern world the stupid are cocksure while the intelligent are full of doubt.\"<br />~Bertrand Russell",
    "\"The limits of my language means the limit of my world.\"<br />~Ludwig Wittgenstein",
    "\"By and large, language is a tool for concealing the truth.\"<br />~George Carlin",
    "\"Our language is the reflection of ourselves. A language is an exact reflection of the character and growth of its speaker.\"<br />~Cesar Chavez",
    "\"Education must provide the opportunities for self-fulfillment.\"<br />~Noam Chomsky",
    "\"I would never die for my beliefs because I might be wrong.\"<br />~Bertrand Russell",
    "\"Most of the fundamental ideas of science are essentially simple, and may, as a rule, be expressed in a language comprehensible to everyone.\"<br />~Albert Einstein",
    "\"Poetry is language at its most distilled and most powerful.\"<br />~Rita Dove",
    "\"Learning another languages is not only learning different words for the same things, but learning another way to think about things.\"<br />~Flora Lewis",
    "\"Language is to the mind more than light is to the eye.\"<br />~William Gibson",
    "\"Man invented language to satisfy his deep need to complain.\"<br />~Lily Tomlin",
    "\"What makes us human, I think, is an ability to ask questions, a consequence of our sophisticated spoken language.\"<br />~Jane Goodall",
    "\"Science is what you know, philosophy is what you don't know.\"<br />~Bertrand Russell",
    "\"Every language is a world. Without translation, we would inhabit parishes bordering on silence.\"<br />~George Steiner",
    "\"Learning a foreign language, and the culture that goes with it, is one of the most useful things we can do to broaden the empathy and imaginative sympathy and cultural outlook of children.\"<br />~Michael Gove",
    "\"Language is not only the vehicle of thought. It is a great and efficient instrument in thinking.\"<br />~Humphry Davy",
    "\"Poetry is not a matter of feelings. It is a matter of language. It is language which creates feelings.\"<br />~Umberto Eco",
    "\"Like everything metaphysical, the harmony between thought and reality is to be found in the grammar of the language.\"<br />~Ludwig Wittgenstein"
];

Now, you need to create an HTML element that is responsible for the container for the quote. For example, you can use a paragraph, span, or div tag. Provide a unique ID (e.g. randomQuoteDiv) for that HTML element and feel free to decorate it with CSS as you like and place it in the Sidebar.

Here is a JavaScript function to display the quote.

  function generateQuote()
  {
    const day = new Date();
    const today = day.getDate();
    const quoteDiv = document.getElementById('randomQuoteDiv');
    quoteDiv.innerText = quotes[today];
  }
  generateQuote();
 

Save this array of quotes, HTML elements (div) and JavaScript functions in the Sidebar section. After that, reload your blog page to see the results. Easy as that.