Javascript - Random Quote Generator that does not repeat code

Question

This is my very first post on Stack overflow.

I've tried several examples here on how to overcome this but cannot find a a fix.(I'm still a newbie with javascript).

I have created a random quote generator that 'changes background and changes the quote' every 15 seconds or on click.

I'm now trying to get it not to repeat itself, moreover to log the quotes that were displayed in the console.

The quotes are within an 'object' within a 'array'.

THe code is below. Thanks for your help I have 3 files (index.html, quotes.js, script.js) -quotes.js

document.getElementById('loadQuote').addEventListener("click", printQuote, true);

//Sets up interval to show print qutoe every 15 seconds
var intervalID = window.setInterval(myCallback, 15000);
function myCallback() {
  printQuote();
}

// Gets a random quote from array Quotes
function getRandomQuote () {
  var pickQuote = quotes[Math.floor(Math.random() * quotes.length)];
  return pickQuote;
}

//prints quote to html
function printQuote() {
  var getQuote = getRandomQuote();
  var message = '';
  message += '<p class ="quote">' + getQuote.quote  + '</p>';
  message += '<p class ="source">' + getQuote.source  + '</p>';
  message += '<p class ="tag">' + getQuote.tag  + '</p>';
  document.getElementById('quote-box').innerHTML = message;
  newColor();
}
// function that will generate random color to the backgroun
var newColor = function randomColor() {
  document.body.style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
}

var quotes = [
//success quotes
  {
    quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.",
    source: "James Cameron",
    tag: "success"
  },
  {
    quote: "The Way Get Started Is To Quit Talking And Begin Doing",
    source: "Walt Disney",
    tag: "success"
  },
  {
    quote: "Don’t Let Yesterday Take Up Too Much Of Today.",
    source: "Will Rogers",
    tag: "success"
  },
  {
    quote: "We Generate Fears While We Sit. We Overcome Them By Action",
    source: "Dr. Henry Link",
    tag: "success"
  },

//health quotes
  {
    quote: "Early to bed and early to rise, makes a man healthy wealthy and wise.",
    source: "Benjamin Franklin",
    tag: "health"
  },
  {
    quote: "Let food be thy medicine and medicine be thy food.",
    source: "Hippocrates",
    tag: "health"
  },
  {
    quote: "If you can’t pronounce it, don’t eat it.",
    source: "Common Sense",
    tag: "health"
  },
  {
    quote: "Health is like money, we never have a true idea of its value until we lose it.",
    source: "Josh Billings",
    tag: "health"
  },

//spirituality quotes
  {
    quote: "Life is really simple, but men insist on making it complicated.",
    source: "Confucius",
    tag: "spirituality"
  },
  {
    quote: "My religion is very simple. My religion is kindness.",
    source: "Dalai Lama",
    tag: "spirituality"
  },
  {
    quote: "Knowing others is wisdom; knowing the self is enlightenment.",
    source: "Tao Te Ching",
    tag: "spirituality"
  },
  {
    quote: "When there is love in your heart, everything outside of you also becomes lovable.",
    source: "Veeresh",
    tag: "spirituality"
  }


];

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Random Quotes</title>
  <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div id="quote-box">
      <p class="quote">Be the change you wish to see in the world! </p>
      <p class="source">Ghandi </p>
    </div>
    <button id="loadQuote">Show another quote</button>
  </div>
  <script src="js/quotes.js"></script>
  <script src="js/script.js"></script>

</body>
</html>

What should the behavior be when there aren't any more quotes? — David Ehrmann
– David Ehrmann, Commented Jan 8, 2017 at 19:34
@DavidEhrmann in that case would be needed a reset function that allows to reset the "history" to restart the "cycle" — willy wonka
– willy wonka, Commented Jan 8, 2017 at 19:39

Schlaus · Accepted Answer · 2017-01-08 19:34:10Z

1

One way is to change your getRandomQuote() function a bit:

function getRandomQuote () {
  return quotes.splice(Math.floor(Math.random() * quotes.length), 1);
}

Explanation: Array.splice() removes items from an array, and returns the removed items. First argument is where to start splicing, and the second argument is how many items to remove. This way the used quotes are removed when used, and so can't be used again until the page is reloaded.

answered Jan 8, 2017 at 19:34

Schlaus

19.4k11 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

noisypixy Over a year ago

A non-destructive way is removing elements from an array of indices instead of the quotes array itself, i.e. [0, 1, 2, 3, ...].

nishnash Over a year ago

awesome, worked like a charm :) thx so much for the suggest :+1:

Tha'er AlAjlouni ثائر العجلوني · Accepted Answer · 2017-01-08 21:58:30Z

0

I like your idea and really reading those quotes! Perhaps try editing:

document.getElementById('loadQuote').addEventListener("click", printQuote, true);

Might be a bit outdated. Try:

document.getElementById('loadQuote').onclick = function(name){yourScript};

Suggesting this because I'm getting the following error message when trying out your code:

"message": "Uncaught TypeError: Cannot read property 'addEventListener' of null". Just try simplifying.

I think your work is very impressive for someone who considers themselves a beginner!

edited Jan 8, 2017 at 21:58

Tha'er AlAjlouni ثائر العجلوني

15.6k7 gold badges37 silver badges40 bronze badges

answered Jan 8, 2017 at 20:40

LorettaA

333 bronze badges

1 Comment

nishnash Over a year ago

thx Tha'er, good little motivation i need at this stage :).. The suggestion from @Schlaus actually worked perfectly... Thx for your help/suggestions thought :)

Collectives™ on Stack Overflow

Javascript - Random Quote Generator that does not repeat code

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related