100 Days of Code: Days 87-88
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.
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.