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.
Below is the entire HTML code generated by following the above steps:
Styling The Application: CSS is used to make the application attractive and visually appealing to the end-user.
- Center the quote box using the top and left properties.
- Apply padding and margin to the necessary elements.
- Use two font families, Primary for the quote and Secondary for the author.
- Two classes namely rotateB and rotateF are added to rotate the backside and the front side when the button is clicked.
CSS Styling is solely based on the designer’s perspective. We highly recommend you tinker with the code and try out your design.
Below is the CSS code for Reference:
Upon successful execution of the above steps, we should have an application designed like this :
The logic of the Application: In this section, we will apply all the logics.
Step 1 (Initializing the data array):
- Here we have used an array to store the quotes fetched from the API.
Step 2 (Creating a function to display the quote):
- We have created a function named displayQuote which displays the quote when the application is loaded or when the new quote button is pressed.
- Use the Math.random function to generate a number between 0 and a total number of quotes fetched from the API. This number is the index of quotes stored in the array.
- Each element stored in the array is an object which has the property text and author. Below is the image of the object:
- Get the quote and the author from the array.
- Set the author to anonymous if the author is undefined.
- Initialize a boolean variable to get to know which side is currently displayed.
- If the front side is displayed, change the quote on the backside and vice versa.
Step 3 (Fetching the quotes from the API):
- Use the type.fit API to fetch the quotes.
- Since fetching data from an API is an asynchronous process, we can use the async function or promises. Here we have used promises to fetch the data and store it in our array.
Step 4 (Adding functionality to the button):
- Add an onclick function to the button.
- Rotate the Quote Box, when the button is clicked using the rotateB and rotateF classes defined in the CSS stylesheet.
- Initially rotate the backside of the box to 180 degrees.
- RotateB rotates the backside of the box to 0 degrees i.e to its initial position.
- RotateF rotates the front side of the box to 180 degrees i.e flips it behind.
- Call the displayQuote function to display a new quote.
Output: That’s it we are done with our application. If you have followed along the end result should look something like this :