Random Quote Machine - Fetch a new quote, author & tweet a quote

#1

Hello, can someone help me with this?
I’ve passed 9 out of 12 user stories. I’m stuck on stories 8, 9, 10 that relate to fetching the quotes, authors and tweeting out quotes.

I didn’t use an api to collate my quotes, I took them from different sites and wrote an array. Here’s my code for html, css & js:

<!DOCTYPE html>
<div class="wrapper" id="quote-box">
  <div id="text">
    <div id="author">
      <div id="new-quote">
        <a class id="tweet-quote"></a> 
        <button onClick="new-quote()">New Quote</button>
        <script src="javascript.js"></script>
        
    <a href={"https://www.twitter.com/intent/tweet".concat(props.tweet)}
      target="_blank"
      >
      
<div class ="container-fluid">
  <div>
    <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 ="tweet">Tweet Quote</a>
    </div>

    <div class ="quotes text-center">
      
      <span class ="quote"></span>
      <br />
      <span class ="author"></span>
    </div>
  </div>
</div>
    </div>
  </div>
</div>

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;
}

$(document).ready(function() {
  let dailyQuote;
  let randomNum;
  let author;
  getQuote();
  function getQuote() {

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

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

document.querySelector('#new-quote').addEventListener('click', () => {
  getQuote(randomQuote);
});

Thank you.

#2

You first need to fix your quotes array. I assume it is supposed to be an array of objects, with each object having a quote and author property. However, you have not used the correct syntax for each object. You should always look at the browser console for any errors (which you have right now because of the invalid object syntax).

#3

You seem to have React code in the HTML? You also have two “New Quote” buttons, one of them with a non-existing inline function.

#4

Thanks so much. Sorry for delay in responding, I had to tend to something else last night.

#5

Thanks so much Randell. Sorry for delay in responding, I had to tend to something else last night.

#6