FCC Speed Run Challenge: Random Quote Generator
This is going to be the first entry in my attempt at speed-running as many of the FCC projects as I can in the next two weeks. I don’t expect to get all that far, but I’ll give it a good shot! I’ve never used anything other than basic HTML/CSS/JavaScript (and jQuery), so that is what I’ll be using throughout.
I decided to skip the tribute page and portfolio in favor of projects that involve more JavaScript, so first up is the random quote generator! This is my first attempt at incorporating JavaScript into HTML/CSS that I’ve written, so there was a bit of a learning curve here.
Stage 1: Design
I admit that I didn’t spend a ton of time on this stage. I used the example here and basically flat out copied how this page looked. This was also what I spent the least time on. It didn’t take long to clone the basic look of the site with HTML and CSS.
Stage 2: Figuring out JavaScript
This is where my time was spent primarily. This is the first time I’ve ever done anything with JavaScript besides solving little coding puzzles, so it took me a bit of time to figure out exactly how to do anything. I started by making a button that just changed the background color, then moved on to figuring out how to get responses back from the API. I used the Quotes on Design API to get my random quotes.
It took me a while to figure out how exactly to get and use the data from the API. I started by just writing to the console, then scouring the jQuery documentation for the methods I could use to get it into the format I wanted and could use.
Finally, after a couple a solid evening of work, I had a button that would display the quote and the author!
Stage 3: The Twitter Link
The last thing I did was get the Twitter link working. This seemed like it would be really easy, but it took me more time than I want to admit. It turned out the answer was easy (I wasn’t converting my text from HTML into regular text for the link).
And then I was done!
Notes:
- Here is a link to the repository
- This is a live version
Notes for me:
- My CSS seems perhaps a bit messy, so in the future projects I want to work on keeping things cleaner, and perhaps making classes more portable so that they can be used on multiple elements
- I couldn’t figure out how to animate the CSS with JavaScript, so I’m going to try to get some stuff animated in later projects just to see if I can do it
Speedrun Progress:
Now it’s on to the next project!
