Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Tell us what’s happening:

I’ve finished my first FrontEnd project from FreeCodeCamp using react in codePen, but couldn’t able to check the test cases since I used react. front-end library.

can anyone help me to check the test cases to my code?

Your code so far

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div id="root"></div>

.random-quote-generator{
  font-family: 'Raleway', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  transition-duration: 0.8s;
}

#quote-box{
  margin: 5% auto;
  width: 40%;
  height: auto;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

#text{
  font-size: 2rem;
}

#author{
 float: right;
  font-weight: 100;
  font-size: 0.9rem;
}

.quote-container{
  clear: right;
  display: flex;
  justify-content: space-between;
}

#new-quote{
  cursor: pointer;
  border: none;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.fa-brands{
  color: white;
  padding: 10px;
  font-size: 1.5rem;
  border-radius: 5px;
}

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function RandomQuoteMachine() {
  const [data, setData] = React.useState([]);
  const [quote, setQuote] = React.useState([]);
  const[loading, setLoading] = React.useState(false);
  const[error, setError] = React.useState("");
  const[color, setColor] = React.useState("rgb(190, 252, 23)");
  
  
  async function fetchQuoteData(){
    
    try{
      setLoading(true);
      const response = await fetch("https://dummyjson.com/quotes");
    const data = await response.json();
    
  if(data && data.quotes && data.quotes.length){
    setData(data.quotes);
    setQuote(data.quotes[Math.floor(Math.random() * data.quotes.length)]);
    setLoading(false);
    
  }
    }
    catch(error){
      setError(error);
      setLoading(false);
}
  };
  
  function random(length){
    return(Math.floor(Math.random() * length));    
}


 
function randomQuote(){
  const randomQuote = data[random(data.length)];
  setQuote(randomQuote);
  const r = random(255);
  const g = random(255);
  const b = random(255);
    setColor(`rgb(${r}, ${g}, ${b})`);
  };
  
  
  React.useEffect(()=>{
fetchQuoteData()
  }, []);
  
  if(loading){
    return(
      <p>Loading data! Please wait...</p>
)
  }
  
  if(error){
    return(
      <p>Error Occurred !...</p>
)
  }
  
  console.log(color);
  
  return (
    <div className = "random-quote-generator" style = {{backgroundColor: color}}>
    <div id="quote-box" >
      <p id = "text" style = {{color: color, transitionDuration: "0.8s"}}>
        <i className="fa fa-quote-left"></i>{quote.quote}</p>
      <p id = "author" style = {{color: color, transitionDuration: "0.8s"}} >-{quote.author}</p>
      <div className = "quote-container">
      <a
  id="tweet-quote"
  href={`https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=${encodeURIComponent(`"${quote.quote}" — ${quote.author}`)}`}
  target="_blank"
  rel="noopener noreferrer">
       <i className="fa-brands fa-twitter" style = {{backgroundColor: color, transitionDuration: "0.8s"}}></i>
</a>
        <button onClick = {randomQuote} id = "new-quote" style = {{backgroundColor: color, transitionDuration: "0.8s"}}>New quote</button>
      </div>

    </div>
      </div>
  );
}

root.render(<RandomQuoteMachine />);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

2

Did you do this to start working on codepen?

You can build your project by using this CodePen template and clicking Save to create your own pen.

3

Or you can add the test script to the pen.

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Anyway, it is passing the tests. But you should submit a version with the test script added.

4

Thank you, it worked.

5

Thanks for the info.