Front End Development Libraries Projects - Build a Random Quote Machine

My code is not passing the test, but i think i passed all the stories need.

User Story #1: I can see a wrapper element with a corresponding id="quote-box".

User Story #2: Within #quote-box, I can see an element with a corresponding id="text".

User Story #3: Within #quote-box, I can see an element with a corresponding id="author".

User Story #4: Within #quote-box, I can see a clickable element with a corresponding id="new-quote".

User Story #5: Within #quote-box, I can see a clickable a element with a corresponding id="tweet-quote".

User Story #6: On first load, my quote machine displays a random quote in the element with id="text".

User Story #7: On first load, my quote machine displays the random quote’s author in the element with id="author".

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

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

User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.

User Story #11: The #quote-box wrapper element should be horizontally centered. Please run tests with browser’s zoom level at 100% and page maximized.

I only get 10/12 when i run the test. What do you think the problem is?

here’s my code:

import { useState } from ‘react’;
import ‘./App.css’;

function App() {
const quotes = [
{
“quote”: ““Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine.””,
“author”: “Roy T. Bennett1”,
},
{
“quote”: ““Don’t be pushed around by the fears in your mind. Be led by the dreams in your heart.””,
“author”: “Roy T. Bennett2”,
},
{
“quote”: ““Live the Life of Your Dreams: Be brave enough to live the life of your dreams according to your vision and purpose instead of the expectations and opinions of others.””,
“author”: “Roy T. Bennett3”,
},
];

const [quote, setQuote] = useState(quotes[0].quote);
const [author, setAuthor] = useState(quotes[0].author);

function getRandomQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
const randomQuote = quotes[randomIndex];
setQuote(randomQuote.quote);
setAuthor(randomQuote.author);
}

return (
<div style={{height: “100vh”, display: “flex”, justifyContent: “center”, alignItems: “center”}}>


Random Quote Machine

    <div className="quote-text" id="text">
      {quote}
    </div>

    <div className="quote-author" id="author">
      {author}
    </div>


      <button type="button" id="new-quote" className="btn" onClick={getRandomQuote}>New quote</button>

    <div className="tweet-quote" id="tweet-quote">
    <a
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(quote)} - ${encodeURIComponent(author)}`}
target="_blank"
rel="noreferrer">Tweet</a>
</div>
  </div>
</div>

);
}

export default App;

Your code so far

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

Can you put this in something like codepen and then send us the link? You will get more help if you make it easy for people to see your code and test your app.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.