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:

File structure

Thought Process for the JS code

When I was first trying to figure out what code I needed to write to accomplish randomly generating a new quote when a button is clicked. I struggled on where to even begin. Then I remembered something that I learned while I was watching a video on JavaScript on the Treehouse website that the instructor said. Roughly they said if it seems to hard break it down into smaller, manageable chunks. I don’t know why but this always stuck with me. When I first begin to tackle the problem I began to think about the project as a whole and how to code it all at once. Of course I became overwhelmed. I scrapped everything I had done so far it wasn’t working any way. I then began to think about what I actually needed to do systematically. A few minutes later I was rolling and the code worked! Here is what I done:

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.