100 Days of Code: Days 87-88

Home / Technology / Web Development / 100 Days of Code: Days 87-88
The Random Quote Generator v1.0 is now complete! I plan to make a few improvements later, but for now it has passed all of the tests and is good to go.

The Random Quote Generator

The random quote generator is finished and has been submitted with all tests passing. I have to tell you, it was somehow easy and overly complicated all at the same time.

Related: Read about the random quote generator in 100 Days of Code: Day 86

The logic behind the quote generator was simple. And if I’d used normal HTML, CSS, and JavaScript to complete this project, I would have been finished in less than a day.

However, as you know, this project was about incorporating one or more front end libraries. Thus, it took a combined three days (or roughly 12 hours total) to complete. On the plus side, I actually didn’t have much of a problem at all with React once I got started and really figured out what I was doing.

I simplified it by using a single component with several internal methods to handle the data. Aside from the constructor() and render() methods, there were randomQuote() and randomColor() methods, as well as a getNewQuote() method, which was used as my click handler to call the randomQuote() and randomColor() methods.

There Are A Few Things To Fix Later

Despite the fact that the app passed all 12 tests, there are a few quirks with the code that I am still trying to figure out how to fix.

  • Twitter text: I had some trouble getting my ‘Tweet Quote’ button to work properly. I am still trying to figure out how to modify the URL to add the quote text/author to the tweet. This will likely be the first thing I fix once I have some time.
  • Initial quote: I wanted the initial quote to be random but had such a hard time figuring out how to make it work without setting the text to the initial state. I’m sure there is a simple solution for this, but after breaking my app about 40 times, I just did what I know works and submitted it. I’m not quite happy knowing it doesn’t work exactly the way I wanted, but I guess it will be fine for now.
  • Repeating color: I figured out a way to prevent the quote from repeating itself (meaning the same quote shows back up immediately after hitting the new quote button). I tried applying this same solution to the colors array for selecting the background/button colors, but it didn’t completely work the same. It mostly worked, but for some reason it keeps repeating the first color (the one initially set). Again, I know there is probably a simple solution for this. It just wasn’t a priority for the time being.

[codepen_embed height=”600″ theme_id=”33690″ slug_hash=”GBGzom” default_tab=”js,result” user=”ablissfullemon”]See the Pen <a href=’https://codepen.io/ablissfullemon/pen/GBGzom/’>Random Quote Machine</a> by Aimie | Blissful Lemon 🍋🌺 (<a href=’https://codepen.io/ablissfullemon’>@ablissfullemon</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Let's chat!

%d bloggers like this: