My First Solo Project
I decided to pick the random quote machine from FCC as my first project. I wanted to pick something that would challenge me but not be too hard for my first solo project. The project ended up not taking as long as I expected for most of it. It took me more time to write the code for the design than it did for the JS I wrote. The actual JS I wrote took me about 20 minutes to figure out how to structure it to get the results I needed and then about another 15 minutes just to write the code. This included the time to test it to make sure it worked too. I want to be able to time the exact amount of time projects are taking me so I can check back for progress. I will start using Toggl on future projects to keep track of this. It works well with Todoist, I use this to keep track of what I need to do for my projects and my life.
The first project setup
I had to pick a text editor that I wanted to really work with from here on out until something better finds me. I previously used Sublime but we just weren’t vibing. After a bit of research, I found out about Atom. I have to say I love it and instantly deleted Sublime and that was that. I sometimes like to code, practice coding or test code from my iPad or iPhone. So I needed an editor for those devices, I chose Coda. It is a great editor for mobile devices. The level of integration it has for importing, exporting and connecting to severs in invaluable. I can get files to and from the Mac and I can get even more integration with an app called Transmit. Using all of those with the addition of iCloud Drive, the work flow is great. No matter what device I am on I have access to all my files and I can get started instantly.
When I was setting up my HTML, CSS and JS files I realized I was going to be doing this a lot. The amount of time it was taking I didn’t want to keep doing this over and over. I know over time it would become much faster for me but it was still too much. So I setup a standard project folder. It has the HTML, CSS, JS and jQuery files already setup and linked to each other. I also included other folders like images and resources so they would be set to. That way I can just duplicate the folder and rename it and jump right in to code without thinking of the setup of the files. That will definitely cut down a lot of time for me going forward. I am sure my future self will thank me. Here is a link of my folder structure just to view:
Thought Process for the JS code
I thought about what I needed the program to do “what was the actual problem?” Generate a new quote with the quote data every time a button is clicked. First I figured out how many of these “random” quotes I wanted, 10 seemed good. To address the randomness, I decided to go with the Math.random route to generate a number. I used the Math.floor to get a number from 0 and multiplied it by 10 to get up to 10.
Next I had to figure out how I was going to use that number and link it to a quote. I initially thought about using a switch statement. That sent me down a rabbit hole and I saw I was going nowhere with that. It seemed like a good idea but I couldn’t get it to work. I scrapped that idea, then I thought about using a multidimensional array. I could access what I needed by looping through it. For the loop I had it write to the document using document.getElementByID for each key that I needed. That was it! Like I said it took me more time to write the code for the design so it looked halfway decent than it did for the JS code.
I have one more thing to tackle and that is being able to share each quote to social media via Twitter and Tumblr. This part I am still working on it is giving me a bit of trouble. Trying to figure out how to get it to post with pre-populated text. I read through the FCC JSON API’s and Ajax. Then I went to the Twitter API and began to read through it. That is pretty much where I am now. I will likely wrap that up tonight and post the project back here later this week.