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.
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!