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.

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.