I have been working through freeCodeCamp’s amazing, free, course since April 2017 and I’m thrilled with what I’ve done so far, even if I still have a long way to go. I wanted to share how I completed my first JavaScript challenge — the infamous Random Quote Generator!
Click here to see (and hopefully play with) the Random Quote Generator hosted on Netlify. Check out the GitHub repo here.
The challenge has two main user stories to fill:
- User Story: I can click a button to show me a new random quote.
- User Story: I can press a button to tweet out a quote.
I had a few requirements of my own which I wanted to meet. I wanted to use CSS Grid, vanilla JavaScript and this awesome CSS framework I read about on Medium called Paper CSS. I think it’s quite beautiful in its simplicity. After some initial feedback, from Twitter friend Jax, I added some color to it. It’s now unashamedly Simpson-esque! It transpired that CSS Grid and Paper CSS don’t play nicely together (I should have known) so it’s just the Paper CSS framework you can see, which was easy to use as everything I’ve penned so far has been made with Bootstrap.
I used vanilla JavaScript as I have limited experience with jQuery (at the moment) and I really wanted to work on my understanding of the fundamentals of JavaScript; I’ve noticed that there is a shift in attitude towards using frameworks as a beginner versus getting a solid grounding in JavaScript from the get-go.
In freeCodeCamp, you are encouraged to “read, search, ask” when completing challenges. I think they should add “watch” as I head to YouTube pretty much every day to see how people code both simple and complex websites / applications. I love how the community loves to share in order to help others. The function for generating the random quote was quite straightforward. I watched this video on YouTube (which is quite basic, but did the job nicely).
I decided not to use an API to pull quotes through from a third party, rather, I wanted to create an array to hold some “funny” quotes about JavaScript and coding.
Then the tweet functionality. This took me at least an hour to figure out! There were lots of examples using jQuery, but hardly anything with plain JavaScript! So I went to the Twitter developer site, which gave some clues but no definitive solution (at least that I could understand). Luckily, freeCodeCamp have some awesome forums and I found a solution, which I think is quite neat, even though it doesn’t have the ability not to repeat the last random number.
Now what?
I had been putting off this challenge for over a month. Despite all of the lessons I had completed with JavaScript on freeCodeCamp and elsewhere, I still didn’t really believe I could actually make something that worked. Silly I know. But now that I’ve completed the challenge, my confidence is growing and I’m ready for the next one!
Thanks for reading. And thanks to Quincy Larson ;)
