As part of my freeCodeCamp Front End Development certificate, I was asked to build a random quote generator which met the following requirements:
For the sake of organization, I broke this project up into 5 parts:
For a detailed account of what I did for each of these steps, check out the Medium post I wrote about this project.
I wanted a simple, text-focused design that would allow users to easily read the quote without being distracted by other design elements:
I used a simple Google Spreadsheet to collect and check quotes for a character count. I thought about using an API, but wanted to be able to easily control for quote content and length.
To sum it up, I wrote code that:
You can see the code in the CodePen I set up for this project.
You might have noticed that the final page looks a little different from my wireframes. As it turns out, the right-aligned quote attribution and buttons looked strange with a longer author name. Plus, I didn’t like the way the buttons jumped from the right of the box to the center as the screen was being resized. I moved the attribution to line up with the text, and put the buttons in the center.
I had some friends test out the quote generator on a variety of devices, and thankfully no one ran into any issues! I did discover a few things I’d like to improve in the next iteration.
Of course, a designer’s work is never done. Some things I’d like to fix or add in the future include: