I’ve been having a lot of fun with one of the freeCodeCamp ziplines for the past few days. The project I’ve been working has been to create a random quote generator.

I love this type of project, as it allows for a lot of freedom to create the kind of thing that interests you. The instructions didn’t specify what kind of quotes should be used, but the example used inspirational quotes [blech! No thanks!] I’m not a big fan of that- it just doesn’t appeal to me. I thought about the kinds of quotes that do interest me, and using the logic that it would be quite easy to find lists of film quotes, I decided to make a Star Wars random quote generator.

Check our my Random Quote Generator on CodePen!

Looking at the example, I knew that the design should be quite simple: a couple of divs, a button to load a new quote, and, for bonus points a button to tweet the quote. The simplicity of the html and css made me think that the JavaScript was going to be tough going! I was pleasantly surprised!

I stuck to plain JavaScript for this project. There were a few instances where I could have used jQuery to cut out a few lines of code, but I’d like to get really good at JavaScript before I start using jQuery for everything [because in my head once I start, I’ll be using jQuery for everything!]

I made an array in the JavaScript file that contains all of the quotes. Clicking the ‘Click Me’ button generates a random number between zero and twenty-six [I used the array.length property in the function so that however many strings I include in the array the function will adjust to include those.] Each item in an array has an index, so I used the random number which was generated to display the string with that index in the array on the web page.

One of the things which confused me a bit was the difference between Math.floor() and Math.round() . I was looking at ways to generate a random number within a range in JavaScript, and I couldn’t understand the difference between the two, as they were both used in the online explanations I found. In the end I used Math.floor()- they both came up with decimal numbers at one point in the equation, but it seemed like Math.round() rounded those numbers up, when appropriate, which meant my function would come up with an error, where Math.floor() rounded them down to keep them within the specified range.

I was talking with my partner about my project, and we were discussing things I could do to make it more exciting. One of the ideas we came up with was to have a gif from one of the films randomly pop up. I thought that sounded great, but wasn’t sure how I wanted to implement that. Having a gif open full screen might cause a bit of confusion: ‘what is this?’ & ‘how do I make it go away?’ so I decided to just have it appear in the div where quotes were being generated. In order to make it appear randomly I created an empty string in the array of quotes. After the random number was generated I had the function check if that number was equal to the index of the empty string. If it was a new class was added to the div. The class’ only function was to display the gif as a background image. If any other number was generated, the function checked if the class name was already applied to the div; if it was, it was removed, and then the number would be used to display the quote with that index number.

Something I’ve been making a real effort with lately [though not at all really in my last project!] has been making things responsive. Because I considered this a fairly simple project, I decided to design this mobile-first. CodePen was a good place to do this because I could just adjust the window to a fairly small width while I was working on it, and see how it would appear on a smaller screen. I would never attempt to design for every different screen width- it would just be too much work to try to keep up with everything coming out. Instead I used one media query break-point, set at 500px wide. Below that, I used a unit that was new to me, ‘vw’, or viewport widths [learn more about that here,] for the text, and percentages for the widths of the divs. Above 500px I increased the margins on either side of the container div [so that it had a bit more room on either side], set a maximum width for the container, and set font-sizes [leaving the font sizes as vw could have resulted in giant buttons, depending on screen size!]

I enjoyed this project a lot more than I thought I would initially! I think a large part of that is probably to do with the freedom I had to create what I wanted to [while adhering to a basic idea] -that’s definitely a great way to keep me motivated. I’m curious to see what kinds of quote generators other freeCodeCampers have created, and I’d love to hear from anyone who’s done a similar project!