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: