FCC Speedrun: Random Quote Machine
So I just finished my preliminary version of the random quote machine, and let me say this… dang Jon Snow, if you know nothing, then I truly know NOTHING. As a bit of background, I’ve only been coding for a few months and am extremely new and innocent to this world of programming. Using various online free resources to learn has been such a valuable thing for me, but disorganization and lack of structure I think is what was holding me back. Thanks to the chingu cohorts I felt like I had a bit more of a community to ask for help and really grind out these projects to make me a better programmer. Although my current cohort session is coming to an end, I plan on continuing with my Speedrun projects as well as posting medium blogs along the way to track my progress.
As a reminder, for me, this is a Speedcrawl, and I plan to revisit these projects and hopefully revamp them when I have a better understanding of JavaScript. But for now, I want to make sure I have the basics down and that everything functions properly before I spend an obsessive amount of time styling.
Project 1: Random Quote Machine
The second front-end project on my Speedcrawl is to create an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/ONjoLe/
Like many others, I too chose to skip over the portfolio project for now because I want to create some apps first to be able to put onto that portfolio instead of having multiple placeholders.
Requirements:
- Includes a clickable button to show a new random quote
- Includes a button to tweet out the quote
This was my first project where I had to include JavaScript; describing it as a daunting one was an understatement. First off, I didn’t even fully know how to add the script tags properly to make the JavaScript work. Second, I felt as though I spent 90% of my time researching and learning how to do specific things in JavaScript and only 10% of my time actually writing code. My biggest hurdle: figuring out how to use an API. I ended up choosing the forismatic API because I saw that a lot of other people used it and the documentation made it seem the easiest for me to implement into my code. While the FCC curriculum made me experience using an API once before, it was definitely not enough for me to understand how it worked. I think I ran something like 20 different combinations of code using the GET request and having to include different variations of the URL until I finally got my code to run properly (thank you to everybody that explained using JSONP and what CORS is for my code to work).
This project also helped me develop a few new methods to make sure everything was web-responsive and worked on different web browser platforms. I began using the CSS borders to clearly see my padding/margins to help me with better design flow, as well as routinely checking to see if my code worked in Google Chrome, Mozilla Firefox, and Safari early on to make sure I knew exactly where I needed to adjust my code.
Things I learned along the way:
- Using both ajax and getJSON to retrieve my desired API (I ended up using ajax)
- Cross-Origin Resource Sharing (still have MUCH to learn)
- Attaching JS files into HTML script tags
- Simple JS animations such as hiding, showing, and fading elements
In the end, I again had fun creating my random quote machine, albeit the process definitely had long moments of frustration. I felt like a complete newborn with this project not knowing anything about JavaScript and now know that I have so much more learning to do before I feel proficient with the language and its endless amount of variations. I’m content with my project for the moment because it works, but like I said before, I do plan on revisiting it and making it more stylistic to my liking. Looking forward to the next project and its plethora of hurdles.
