Turns out, my Quote Generator wasn’t quite complete. I tweeted it out for all the world to see, and @FreeCodeCamp caught something I missed.
@ceritadoesit Nice start. But I got to the end and there were no more quotes. Be sure to grab a random quote each click instead of cycling.
— Free Code Camp (@FreeCodeCamp) November 18, 2015
When I was first coding this project, I was trying to use a for loop to cycle through all of the quotes. I took it out once I realized that I didn’t want to cycle through since I’m using randomized values. So, for a second, I thought I screwed something up and the code reverted back to that point.
I clicked the button a handful of times and it seemed to be working as expected. But clearly there was a problem somewhere, so I kept clicking. Lo and behold, my quote div completely disappeared!
In my last post, I mentioned how Bonfires are helping me get better at approaching solving these problems. I’m also getting better at debugging. I instantly opened the console to look and see what happened when I clicked my generator button. I printed to the console log to show me when it generated a number and when it displayed successfully. It took about 15 tries before my code broke and I got that cute little error box that told me what was wrong.
This is my code before:
var x = Math.floor((Math.random() * quotes.length) + 1);
And this is my code after:
var x = Math.floor((Math.random() * quotes.length - 1) + 1);
Can you spot the difference?
Turns out, I wasn’t giving my code a proper range to pull the number from. Although
quotes.length might equal 13, that also means that I need the random number to stop at index 12. My code was including 13, which doesn’t exist, and broke my generator.
Thanks again to Free Code Camp for finding that error for me. It’s always a little disheartening when you are proud of a project then someone finds a flaw that you missed. But, I’m learning it’s actually pretty difficult to accurately test your own code. My goal was to make my code work, so I tested it to make sure it worked and it did. But when FCC tested it, they tested it to see if it would break; something I didn’t even think about. After realizing that, I ran my generator over and over again until I was sure there would be no more errors (over 300 times!).
Here’s my now fully functioning Random Quote Generator.