https://tejasx16.github.io/Quote-Genertator.github.io/ live on

listen new quote and you can copy this quote and post on twiter

A Random Quote Generator is capable of pulling quotes randomly from an API, a database, or simply from an array. We will be designing a Random Quote Generator from scratch using HTML, CSS, JavaScript, and type.fit API. The webpage displays a random quote from a collection and upon the click of a button, it randomly generates a new quote. We will first generate the basic HTML Template and style it using CSS before diving deeper into the JavaScript Logic.

Making the Bare Bones Of Our Application: In this section, we will use only HTML and put all the required CDN links.

Step 1 (Adding our Foundation): Link your stylesheet and add other resources required for the project as desired, for instance, we have added additional bootstrap libraries and Google fonts for styling purposes. Our next step is to add the main body tag, where the bare bones of the Random Quote Generator Lie. Below is the code for the above step: Step 2 (Holding the front part and the back part of the Quote Box): Now it’s time for adding the main HTML Code of our application. Add a div tag that holds the front side and the backside of the Quote Box.

Step 3 (Adding front part of the Quote Box): Add a div element that holds the text, author, and the clickable button.

Step 4 (Allocating area for displaying the quote): Let’s add a span element that holds the left font awesome quote icon and the quote to be displayed. A span tag is used as the quote icon and the quote needs to be on the same line.

Step 5 (Allocating area for displaying the author): Use a div tag to hold the author of the quote.

Step 6 (Adding the button): Use an anchor tag to display the button. Step 7(Adding the back part of the Quote Box): Repeat the above 5 steps and generate a replica of the quote box which exists behind the current box. After performing the above steps, we have a bare-bones application with no styling or logic.