I recently finished the algorithm section on freeCodeCamp, which unlocked the intermediate Front End Development Projects.
These projects are a big step up from the projects I have tackled so far but I have been looking forward to working on them. First up: Build a Random Quote Machine.
This project involves building a CodePen app that generates random quotes. The user should be able to click a button to show a new quote. They should also be able to press a button to tweet out a quote.
You can learn more about the rules of the project in this video:
I decided to base my quote machine on Heroes of the Storm, which is a game from Blizzard Entertainment that I enjoy playing and writing about. I even came up with a cool name for it: Quotes of the Storm.
After sketching out my ideas for how I wanted the layout to look, it was time to set up the HTML and CSS.
This was the first project I have worked on since I learned about Flexbox. Before I used either Bootstrap or CSS Floats to center content. This time around I used Flexbox and I’m never going back again.
I used a mobile-first approach so I created the basic layout using a 320 pixel screen. From there it was just a matter of adding a few media queries as the screen size expanded to maintain the look of the layout.
Everything came together fairly easily. The toughest part was resisting the temptation to micro-manage the layout by adding too many media queries.
To capture the feel of Heroes of the Storm, I chose a nice space background and used a font named Exo.
I knew what I wanted the logo to look like but I didn’t have the skill necessary to create it. Fortunately, I found a friend on Twitter who was able to create the logo for me (shout out to @RetPallyJil).
Lastly, I decided to include a sticky footer at the bottom with links to my various online profiles. This wasn’t part of the original assignment but I figured a little bit of self-promotion couldn’t hurt. This is what I hope to do for a living after all.
Creating the Quote Library
I knew long before I started working on this project that I wanted my quote generator to be themed after Heroes of the Storm.
The game itself is a great source of interesting quotes and I thought basing the project on something I was already passionate about would make it even more enjoyable to work on. It was also something that I thought the Heroes community might get a kick out of, which might lead to a few more eyes on the project.
Many people use an API to access a library of quotes for their project. Since I wanted to use Heroes of the Storm quotes, using a premade library wasn’t going to be an option for me. Luckily I had been gathering quotes for weeks in preparation for this project.
I knew I could create a two-dimensional array to store my quotes and sources so I began working on that.
Once the array was finished, I added a Math.random function to generate a random number. I then created variables using that random number to access the quote and source.
With that done it was time to use jQuery to add functionality to the New Quote and Twitter buttons.
Did I mention I didn’t know how to do that?
I knew this was going to be the hardest part of the project and it was time to figure it out.
I wish that I could share a link to a website or video that helped it all make sense but in the end, it was a lot of google-foo and trial and error.
That said, these two videos from CodingTutorials360 did help give me a good launching point for where to start:
Finding an article, forum post, or video that will give you the answer to a question is fairly easy. Finding a source that will explain the answer is much more difficult.
That is why it is often good to keep asking the question even once you know the answer.
You aren’t actually looking for the answer anymore, you are looking for the why behind the answer.
That was the process I went through on trying to figure out jQuery.
Finding the code itself was the easy part. Understanding each part of the code and figuring out what else I could do with it was the hard part.
You can check out a stand-alone version of the Quotes of the Storm app here.
As always, any feedback is appreciated.