Random Quote Machine - It works, but not passing

#1

Hello and happy new year!

I would really love some help with this assessment. I keep refining it to the point that all the components are working. When I click the links, the quotes changes plus I can tweet out. I’ve passed 9 tests, but 3 have failed namely:

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

  2. My quote machine should fetch the new quote’s author when the #new-quote button is clicked and display it in the #author element.

  3. I can tweet the current quote by clicking on the #tweet-quote element. This element should include the “twitter.com/intent/tweet” path in it’s href attribute to tweet the current quote.

Here’s all of my code:

html

<!DOCTYPE html>
<div class="wrapper" id="quote-box">
  <div id="text">
    <div id="author">
      <div id="new-quote">
        <a class id="tweet-quote"></a> 
        
<div class ="container-fluid">
  <div class ="text-center">
      <h1>Daily Positive Quotes</h1>
      <br />
      <p>A selection of positive quotes to help keep you on track</p>
      <br />
    
      <button class ="btn btn-default" type="submit" id="newQuote">New Quote</button>
    
<a href ="#" class ="btn btn-default" id ="tweetQuote">Tweet Quote</a>
  </div>
    <div class ="quotes text-center">
      <span class ="quote"></span>
      <br />
      <span class ="author"></span>
    </div>
  </div>
</div>
    </div>
  </div>
</div>

JS

$(document).ready(function(){
  let randomQuote;
  let randomNum;
  let randomAutho;
  getQuote();
function getQuote() {
  
    let quotes = [
         "When people show you who they are believe them the first time.", "A woman unaffected by insults has made her enemies absolutely powerless.", "Life is the flower for which love is the honey.", "Love’s greatest gift is its ability to make everything it touches, sacred.",   "Be yourself as everyone else is taken.", "Your practice of forgiveness is your ticket to clarity, vitality and freedom.", "Change the world by being yourself.",  "Every moment is a fresh beginning.", "Simplicity is the ultimate sophistication.", "What we think we become."
    ];
    
    let author = [
        "-Maya Angelou", "-Entity", "-Victor Hugo", "-Barbara De Angelis","-Oscar Wilde", "-Iyanla Vanzant", "-Amy Poehler", "-T.S. Eliot", "-Leonardo De Vinci", "-Buddha"  
    ];
    
 randomNum = Math.floor(Math.random()*quotes.length);
 randomQuote = quotes[randomNum];
 randomAuthor = author[randomNum];

  $(".quote").text(randomQuote);
  $(".author").text(randomAuthor);
}
 
   $("#newQuote").on("click", function(){
    getQuote();
  });
  
   $("#tweetQuote").on("click", function(){
    
  window.open("https://twitter.com/intent/tweet?text="+randomQuote + " " +randomAuthor);
});
  
  });

CSS

body {
  background-color: orange;
}

h1{
  color: purple;
  font-family: "verdana";
  font-size: 60px;
}

p{
  color: purple;
  font-family: "verdana";
  font-style: italic;
  font-size: 22px;
}

.quotes{
  background-color: purple;
  width: 33%;
  margin-right:auto;
  margin-left:auto;
  border-color:purple;
  border-style:solid;
  font-color:purple;
  border-radius:10px;
  margin-top:20px;
  padding:20px;
  height:auto;
  color:orange;
}
.quotes {
  font-size:30px;
}
.author {
  font-size:10px;
}

Given that the machine works, where have I gone wrong? Thanks in advance for your help.

Bybreen

#2

Uhm, as far as i can see the element with new-quote as id is not a button (you have a button with newQuote as id); i’m not sure about the challenge tests but it’s definitely something i would try ^^

Tweet-quote issue appears auto-explanatory: you have no href at all on it, try to puth that attribute and use the given path as value ^^

Good luck, and happy new year! :slight_smile:

1 Like
#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

#4

Thanks Randell for letting me know the protocol.

#5

Thanks Layer for spotting this for me.

1 Like
#6