[DAY 60-62] I built a random quote machine using React

Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.

On days 60-62, after completing the libraries and frameworks course, I continued on to the projects required to finish to acquire the Front End Development Libraries certificate.

These are 5 different projects that have their own user stories to be fulfilled.

The first project is a random quote machine. It is a program that generates quotes from popular figures by clicking the next quote button.

How I did the project is doing the bare HTML first just to visualize where the quotes will go, as well as the buttons, author names, and anchor links.

I made a div container for the text, div container for the name of the author, and div container for the next quote button and anchor links.

Next, I went straight into Javascript for functionality. In making this project, I wanted to practice my skills in React so I used it to make this project.

My workflow has always been bare HTML first, then add the functionality to make sure it works, then lastly, I finalize my app with CSS for designs.

In adding the functionality, I first found a fetch API for random quotes from popular figures. Next, I initialized the states and made functions within my class component to set state for the quotes and author names.

After that, I added the function for the next quote button to randomly choose a quote within the fetch API data to render.

I also added features like a share button for twitter and facebook so that the quotes (along with their respective authors) can be shared to social media.

Lastly, I finalized the design of the project using vanilla CSS and made it look visually appealing.

With that, I successfully fulfilled the user stories and passed the first project.

Anyways, that’s all for now, more updates in my next blog! See you there!