Random Quote Generator Retrospective


The random quote generator is a project that just generates a random quote when a user hits the 'Get Quote' button. This is the first project where I wrote any substantial JavaScript and I also used a non-standard font for the first time.

I decided to theme my random quote generator with one of my favorite fantasy series, The Lord of the Rings.

Code Review

Having a look at the code I wrote for this project, I was still using (and abusing) Bootstrap. I did move a bit further and use the btn and btn-primary classes. So I had moved a little beyond only using it for the grid. I also started using the smaller column sizes to make the page more responsive. There are several col-xs-x columns sprinkled throughout.

In the JavaScript, I have a large array of arrays with quotes and who said them and all of the JavaScript was, surprisingly, vanilla JavaScript. I used a simple random number generator to determine which quote and image to show in the UI. I did link jQuery in the head of the HTML and used it just in a script tag at the bottom of the index.html page to detect button clicks. Looking back at the JavaScript for this project, I'm shocked to see that it looks quite clean. It definitely looks better than my HTML did.

I remember the biggest struggle in this period being making sense of how the script tag in the index.html page and the JavaScript in a linked .js file interacted with one another. I also had a lot of trouble getting the external font files loaded in and working properly.

Future Improvements

My random quote generator has lots of area for improvement:

  • First off, I'd remove the dependency on jQuery since I am only using it for grabbing a button element to listen for a click.
  • I'd remove Bootstrap and use flexbox to layout the page since it is a fairly simple page.
  • I'd like to revisit this app and rewrite it using Angular as a first step in learning how to test components in Angular using Jasmine. Since this app is so simple, I think it might be a good place to start.
  • I may be able to find a public API of Lord of the Rings quotes to hook into rather than hosting my own array of quotes, but it might not also include the images which is an additional touch that I like.