A Quote for Any Occasion – Javascript Arrives

Difficulty: Medium

Estimated Time: 8-20 hours

Website Link


Hardest Part

I had the hardest time with my Twitter button. It was quite challenging having to figure out the API nuances for the first time. Also, styling the button gave me an equal amount of frustration. Because the button came with its own styles, overriding them at the time proved difficult for me, and I tried everything to get it to line up with my quote button but to no avail. I could go back and fix it now, but I leave it as a reminder to never let an element get the best of me again.

My Advice

Don’t let not knowing something get to you. Just Google it or check Stack Overflow. Also if something isn’t working, check that:

  • Log the result of any API call to make sure it isn’t coming in undefined
  • Make sure you are using the correct callback for your API. You could also try Googling JSONP. The example at the bottom of this page shows how your request should look.
  • You added jQuery to the body so inside your <body></body> tags after your main content includes
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  • You spelled everything correctly. Even 1 wrong letter can throw it all off.
  • You have no errors in the developer console. If on chrome hit Ctrl+Shift+I to see the console log.

Also, the amount of typed code for this project will probably not be the part that takes your time. It will be learning how to implement an API if you so choose, and getting used to JavaScript. Just expect to be using Google a lot for this one.


My Journey

Being the first project of the intermediate front-end projects, I really wanted to get off to a strong start. I thought about trying to mimic the coloration effects of the example project, but I just didn’t know enough JavaScript to get it done in a timely manner. After this realization, I was already a few hours in, and getting discouraged until the idea I ran with hit me. I decided to model my project after the popular Chrome extension Momentum.

This meant having to build out a functioning clock, but I felt like this was an accomplishable task. It didn’t take long to get a decent model up and running. I decided to add seconds as well. The hardest part here was just finding the bugs because I had to find them by chance when looking at the clock. This is why I now strongly advocate testing functions and methods. I ended up having some bugs with what number the days of the week start at, and with converting the time to a 12-hour format.

After sorting out the clock, I had to sort out how to overlay the content on top of a very responsive background image. This time I had wisened up and used a CSS background image that made it so much easier than compared to my previous project.

With that too figured out, I had to deal with getting the random quotes. I thought about using an API. but once again I didn’t feel comfortable enough with JavaScript yet. So, I decided to save some quotes from the web in an array and randomly iterate through them.

Looking back this is not the most efficient method, and would most definitely change it, but with most mistakes, I’ve made early on it serves as a reminder to never make that mistake again.

All that was left with the quotes was to add a button and give it functionality, which didn’t give me much trouble. I then was on to the final requirement – adding a “Tweet” button.

We were instructed to follow the Twitter instructions on how to do this, and I did, but for some reason, I could not get my quote to pass through into the tweet. I spent hours trying to figure out why until I decided it was no longer time efficient and just decided to pass through a link to my project instead.

Am I proud of letting this get the best of me? No. My pride definitely took a shot. But at some point, the amount of time put into figuring out one element of a project must be weighed against the impact of that element. For me, I decided the impact was not as important as the time, and I would take the loss until a time where I could solve the problem in a much shorter time frame.

 


Closing Remarks

This project nearly knocked me down. Although I had previous coding experience, my first time actually implementing JavaScript gave me a few solid blows to my pride. Tackling any new topic is an arduous task, and frustration is to be expected. However, that is no excuse to give up completely or even to complain.

If anyone else felt like or ever feels like giving up because something is too hard, don’t. Stop working on it, sleep on it, think on it, and maybe the piece you need to click will fall into place when you’re not actively working on it. Never feel like you aren’t smart enough, or don’t work hard enough because we all have felt that way at least once in our life.

The FCC community and coding community, in general, is very understanding becuase I think most people can relate. Find a forum, ask a question, and never be ashamed if you don’t know something. We’ve all been there.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: