Build a Random Quote Machine. This is the first project of FreeCodeCamp Front End Libraries Certification. A Random quote machine built with React.
Check for Live Demo
Build a CodePen.io app or other frontend framework that is functionally similar to this: https://codepen.io/freeCodeCamp/full/qRZeGZ.
-
I can see a wrapper element with a corresponding
id="quote-box". -
Within
#quote-box, I can see an element with a correspondingid="text". -
Within
#quote-box, I can see an element with a correspondingid="author". -
Within
#quote-box, I can see a clickable element with a correspondingid="new-quote". -
Within
#quote-box, I can see a clickable element with a correspondingid="tweet-quote". -
On first load, my quote machine displays a random quote in the element with
id="text". -
On first load, my quote machine displays the random quote's author in the element with
id="author". -
When the
#new-quotebutton is clicked, my quote machine should fetch a new quote and display it in the#textelement. -
My quote machine should fetch the new quote's author when the
#new-quotebutton is clicked and display it in the#authorelement. -
I can tweet the current quote by clicking on the
#tweet-quote aelement. Thisaelement should include the"twitter.com/intent/tweet"path in it'shrefattribute to tweet the current quote. -
The
#quote-boxwrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.
This project bootstrapped with Create React App.
In the project directory, you can run:
Runs the app and view it on the browser in the development mode: http://localhost:3000
The page will reload if you make edits.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
Deploy build folder to gh-pages branch of the repository .
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.