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!
Top comments (0)