Please Help Me With My Quote Machine

Currently passing 8/12 tests. Please give me a hint to steer me in the right direction.

<!DOCTYPE html>
<html lang="en">
      
<head> </head>

<body>
<div id="wrapper">
  
<h1>Philosophy Quote Machine</h1>
  </br></br>

  <div id ="quote-box">
  
<div id="text" class="text">
  
  <div class="quoteDisplay"></div>
    </div>
    
 <div id="author" class="author">
   
   <div id='authorDisplay'></div> 
   
     </div>
   </br></br>

<div id="new-quote">
   <button id class="button" id="new-quote" onclick="quoteData()"> New Quote </button>
     
</div>
 </br></br> 
  <a href="https://twitter.com/intent/tweet" class="button" id="tweet-quote" title="Tweet this quote!" target="_blank"> <button> Tweet This Quote!</button></a> 
     </div>  


  </br></br> <footer> Designed by <a href="http://meredithkirby.com">Meredith Kirby</a> for Free Code Camp's Front End Libraries Certification.</footer> 

<script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</body>
</html>
body{
  background-color: grey;
	font-family: serif;
  font-weight: bold;
	color: indigo;
  text-align: center; 
}
h1{
  text-align: center;
}
button{
  background-color: grey;
  color: indigo; 
 font-family: serif;
 font-weight: bold; 
 font-size: 30px; 
  align: center;
  text-align: center;
 }

footer{
  
}
}
text {
  padding: 25px;

}
function quoteData(){
var randomNumber = Math.random() * (quotes.length);
  
document.getElementById('quoteDisplay').innerHTML = quotes [randomNumber];
  
var randomNumber = Math.random()* (authors.length);
 
document.getElementById('authorDisplay').innerHTML = authors [randomNumber];
  

}
var quotes = [
				   "This is patently absurd; but whoever wishes to become a philosopher must learn not to be frightened by absurdities.",
				   "Philosophy is a battle against the bewitchment of our intelligence by means of language.",
				   "We are too weak to discover the truth by reason alone",
				   "To be a good human being is to have a kind of openness to the world, an ability to trust uncertain things.",
				   "What did you do as a child that made the hours pass like minutes? Herein lies the key to your earthly pursuits.",
				   "What labels me, negates me.",
				   "Words are never ‘only words’; they matter because they define the contours of what we can do.",
				   "I don’t believe anything, but I have many suspicions",
				   "Truth, she thought. As terrible as death. But harder to find.",
				   "A bird doesn't sing because it has an answer, it sings because it has a song.",
           "Each of us is responsible for everything and to every human being."]

var authors= [
                    "Bertrand Russell",
                    "Ludwig Wittgenstein",
                    "St. Augustine",
                    "Martha Nussbaum",
                    "Carl Jung",
                    "Søren Kierkegaard",
                    "Slavoj Žižek",
                    "Robert Anton Wilson",
                    "Philip K. Dick",
                    "Maya Angelou",
                    "Simone de Beauvoir"]




I see a few problems.

Firstly, you have:

document.getElementById('quoteDisplay').innerHTML

but there is nothing with that id.

Next, when you are calculating your indices:

Math.random()* (authors.length)

That is going to give you a floating point number. But you can’t use a floating point number as an array index. How would we make that an integer?

Lastly, you are computing a random index for the quote and a separate random index for the author. Are you sure that’s what you want?

Thank you!

My machine is now functioning, but I’m still failing 2 tests. Here is where I am at now. I know I don’t want two random vars (I don’t want to mix up quotes and authors), but how do I get the quote and author to display in separate elements?

Screen Shot 2020-09-23 at 3.29.35 PM

<!DOCTYPE html>
<html lang="en">
      
<head> </head>

<body>
<div id="wrapper">
  
<h1>Philosophy Quote Machine</h1>
  </br></br>

  <div id ="quote-box">
  
<div id="text" class="text">
  
    <div id="author" class="author">
  
  <div id= "quoteDisplay"> </div>
  </div> 
     </div>
   </br></br>

<div id="new-quote">
   <button id class="button" id="new-quote" onclick="quoteData()"> New Quote </button>
     
</div>
 </br></br> 
  <a href="https://twitter.com/intent/tweet" class="button" id="tweet-quote" title="Tweet this quote!" target="_blank"> <button> Tweet This Quote!</button></a> 
     </div>  


  </br></br> <footer> Designed by <a href="http://meredithkirby.com">Meredith Kirby</a> for Free Code Camp's Front End Libraries Certification.</footer> 

<script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</body>
</html>


function quoteData(){
var randomNumber = Math.floor(Math.random() * (quotes.length));
  
document.getElementById('quoteDisplay').innerHTML = quotes [randomNumber];

}
var quotes = [
				   "This is patently absurd; but whoever wishes to become a philosopher must learn not to be frightened by absurdities.-                    Bertrand Russell",
				   "Philosophy is a battle against the bewitchment of our intelligence by means of language. -Ludwig Wittgenstein",
				   "We are too weak to discover the truth by reason alone. -St. Augustine",
				   "To be a good human being is to have a kind of openness to the world, an ability to trust uncertain things. -Martha Nussbaum",
				   "What did you do as a child that made the hours pass like minutes? Herein lies the key to your earthly pursuits. -Carl Jung",
				   "What labels me, negates me. -Søren Kierkegaard",
				   "Words are never ‘only words’; they matter because they define the contours of what we can do. -Slavoj Žižek",
				   "I don\’t believe anything, but I have many suspicions.-Robert Anton Wilson",
				   "Truth, she thought. As terrible as death. But harder to find. -Philip K. Dick",
				   "A bird doesn\'t sing because it has an answer, it sings because it has a song. -Maya Angelou",
           "Each of us is responsible for everything and to every human being. -Simone de Beauvoir"]






I’m not getting those errors - I’m getting timeout errors:

  1. When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.

Timeout of 15000ms exceeded. For async tests and hooks, ensure “done()” is called; if returning a Promise, ensure it resolves.

What is happening is that the test is checking what is in the element with the id “text”, pressing the button with the id “new-quote” and then seeing if the contents of the element with the id “text” has changed. It waits 15000ms and then give us. So, a step in that process is broken.

OK, let’s look at your button:

      <div id="new-quote">
        <button id class="button" id="new-quote" onclick="quoteData()"> New Quote </button>
      </div>

First of all, the div and the button both have an id “new-quote”. It is a strict rule that every id must be unique. You cannot have to of the same id. Also, in your button you have a phantom id with no value - I don’t know what that would do.

And the hierarchy in general is messy. I can’t tell what is what:

  <div id ="quote-box">
  
<div id="text" class="text">
  
    <div id="author" class="author">
  
  <div id= "quoteDisplay"> </div>
  </div> 
     </div>
   </br></br>

<div id="new-quote">
   <button id class="button" id="new-quote" onclick="quoteData()"> New Quote </button>
     
</div>

What is a child of what? I see that you have an element with id “text”, but you aren’t writing to that , you’re writing to the element with id “quoteDisplay”. Maybe that still works because one is wrapped in the other. I don’t know.

I’d want to get all that straightened out first. Try to get in the habit of formatting your code as you go.

And when I said that you should not have two random indices, I didn’t mean that you shouldn’t have an author section - you’re actually required to. My point was that you don’t want to pair random quotes with random authors.

Thanks so much for all your help! I’m passing all 12 tests.

1 Like