Working on the Free Code Camp Weather App

I am working on the Free Code Camp weather app quite consistently.

Understanding the difference between $getJSON() and $ajax() to parse the JSON response from your chosen weather API is key. You can technically use $getJSON but the $ajax API call syntax is much easier to understand, though is more verbose. You can also customize how you get your response as well as other options.


$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var url = \”\” + lat + \”,\” + lon;
type: \’GET\’,
url: url,
dataType: \”jsonp\”,
success: function(data)

This jQuery code has an $ajax() function with an object inside it. It specifies what type of ajax API call it needs, which is GET— we are retrieving information from the API, in the form of a JSON response. We are passing in the API URL which we assigned to the url variable in the self-executing anonymous function expression navigator.geolocation.getCurrentPosition(function(position). Also in the ajax call is the dataType which expects the type of data the response will give back which is most commonly jsonp, and the success callback.

This is fairly easy to grok if you are familiar with jQuery.

$.getJSON() or $ajax()?

$.getJSON(url, data, success) is how you would use it. It\’s simple, not verbose, yet it is limiting.

A better $.ajax() example which showcases the complexity you can accomplish:

type: \’GET\’,
url: filename,
data: data,
async: false,
beforeSend: function (xhr) {
if (xhr && xhr.overrideMimeType) {
dataType: \’json\’,
success: function (data) {
//Do stuff with the JSON data

There are a lotof parameters here. Some are asking if you want to get the results asynchronously, using an xhr response from the server, and several other types of parameters. This gives you more control, depending on the API.

Link to the App?

It\’s almost finished. Still need to get civic data and do some CSS Kung fu. But after that, it should be ready to go. No link– I have an API key I am using and need to keep it a secret for a bit. Once it is done I will link it up on GitHub Project Pages.

Random Quote Generator Finale


So I am finally finished with the Free Code Camp Random Quote Generator. I can breathe a sigh of relief until next project.

I finished it at 1 am yesterday morning. I wasn’t going to sleep until it was finished and I didn’t. I tweaked it well into the morning, finally falling asleep after decompressing with The Forensic Files on Netflix around 4:30 am. I was so anxious and on this programmer’s high that I couldn’t sleep.

I shared it on Twitter and mentioned Free Code Camp and I got a lot of likes and retweets as Free Code Camp retweet it.

I took my design and existing code and reengineered it for what I needed it to do.

Learning While Building

So a funny thing happened while I spent my Saturday heads down, headphones on coding this thing for 7 hours:

The more you build, the more you learn.


This has been repeated to me many times. I was in a tutorial loop, partially because the gamification is so rewarding and also because I was afraid of making something broken and ugly.

My portfolio is super ugly. I have made it private on CodePen 1 and am thinking about making it a Portfolio 2.0 some time down the road.

I was so frustrated after I started it at the end of June because I would look at code and not understand what it did. My design was needlessly complicated, and I was just all over the place with it.

I went back to Treehouse after scrapping my design and taking a week and a half break from it. I worked on it here and there. But Saturday while working on it and looking at documentation and googling the hell out of my issues, I actually understood the API code I copied and reengineered it. I consulted the documentation for jQuery and decided on which methods and event handlers to use pretty much on my own.

I was proud of what I had done. While a lot of that code was not mine, I made it mine, my design, everything.

Looking Ahead to the Weather App

I am not sure I will have enough time between now and the start of the semester to work on the Weather app. I will be using the API because it is the most accurate 2. Dark Sky and a few other apps use it so I want to give it a shot. I took all of Sunday off to decompress from the high of completing the Random Quote Generator. I am writing this article at 12:30 am and am getting a bit tired. I just wanted to share the progress I made as a developer and on the RQG. You can find it here: 3 


  1. I am a pro user. A lot of features come in super handy while building apps in there for Free Code Camp ↩︎
  2. Hopefully it is free to use ↩︎
  3. There’s a caveat, though and that is there is a bug in Twitter sharing that adds a <p> tag to the beginning of the share. I am looking into it and will hope to fix it in the next few days. ↩︎

Knowing Your Limits


I had to give up on my Random Quote Generator design.

It was far too difficult for my skill level.

I didn’t want to admit this. I still want to build it. I still think I can, and maybe I can, but not right now.

Hubris maybe a factor in trying it in the first place. I looked at the jQuery and Ajax and had to really, really, scour the code to understand it. The last time I learned about jQuery and AJAX was months ago, maybe even the end of last year. The Free Code Camp track was nice but lacking in depth.

I went everywhere I could to figure out how to implement the design in CSS and HTML first but I kept coming up short.

I gathered the courage to ask for help after to failing to get the appropriate type of help for my problem in the Free Code Camp forum.

BenGitter confirmed what I already knew.

I had to scrap it and try something simpler.

I had to start over.

Baby Steps

I really thought I could bullshit my way through it, cobbling together different code snippets and trying to learn on the fly basic jQuery and AJAX concepts. Huh uh. That won’t work.

While I do need to build the thing, I need to have a better foundation. I need to know what the basic methods do and how I implement them. I need to know how to use AJAX with jQuery to make calls to the API I choose.

I need to understand callback functions, specifically jQuery callbacks.

So I am going over the jQuery and AJAX courses at Treehouse again. This way, I can take better notes and learn about the code I forked from the example that Free Code Camp gives for this assignment. Then I will come up with a simpler design in Sketch and work to use it with a quote API somewhere.

Time to work.

Random Quote Generator Woes


I spent a lot of time looking over Chris Coyer’s magical looking Quotes on Design website. I’ve also spent a lot of time looking at its structure in Chrome Dev Tools. I’ve played around with it and I am sort of stuck.

I even went back into Free Code Camp CSS waypoints to figure out the difference between margin, padding, inline styles, and !important. I went to Stack Overflow and got some advice but the end result still wasn’t what I wanted. I uploaded my prototype but they still didn’t get it quite right. I mean, they did a really weird job of it.

I could definitely go to the Free Code Camp forums but I am hesitant to. I went to the Gitter chat and I didn’t get the right help at the time. I have been picking bits and pieces out of Chris’s website and scouring the web for more information on how to make this work. I even spent 8 hours last week solely on web development, close to 3 hours a day on the days I worked on it.


I could definitely do more but I am trying to get healthy so I am back at the gym three days a week and fitting in three hours of work is about all I can do.

Last week I was burnt out. I had worked really hard on the Random Quote Generator and working out and doing other things that I just didn’t have any energy last week and I am finding it increasingly hard to get back into it. I have bitten off way more than I could chew with this design but I am not going to scrap it. I will learn as I go. I will go back to Gitter, to the forums and see what I can get.

They Say Building is How You Learn

I am trying. I see so many of the Random Quote Generators and they are extremely simple in design. I fell in love with Chris’s design without Chris’s skill and I am paying for it.

I found some code for the random quotes that uses jQuery. Here it is:

var quoteMachine = {
    quoteArray: [],
    count: 0,
    init: function(){
        $.getJSON(\"[orderby]=rand&filter[posts_per_page]=40&callback=\", function(data) {
            quoteMachine.quoteArray = data;
            $(\"#buttons\").css(\"visibility\", \"visible\");
        $(\"#newQuote\").on(\"click\", this.newQuote);
        $(\"#tweetMe\").on(\"click\", this.tweet);
    placeQuote: function(){
        $(\"#quoteContent\").html(\"<h3>\" + quoteMachine.quoteArray[quoteMachine.count].content + \"</h3>\");
        $(\"#quoteTitle\").html(\"<h4> - \" + quoteMachine.quoteArray[quoteMachine.count].title + \"</h4>\");
    newQuote: function(){
        if(quoteMachine.count < 39){
            quoteMachine.count = 0;

    tweet: function(){
        var content = quoteMachine.quoteArray[quoteMachine.count].content;
        content = content.substring(3, content.length -5);
        content = content.replace(/&#.{4};/g, \"\");
        content = encodeURIComponent(content);
        var title = quoteMachine.quoteArray[quoteMachine.count].title;
        var message = content + \" -\" + title + \"%20#randomQuote%20#FCC\";\"\" + message);


Now, I am going to try to reverse engineer this to use the Quotes on Design API 4.0. There are parts of this that baffle me and parts that I understand.

Seeking Help

I don’t know when I stopped asking for help. I am always in Gitter and on the forums and just recently I stopped going and asking. I am not sure why my behavior changed— I guess I have asked for so much help and no one is giving me the answer I seek. Is the design really that complicated? I am not sure but I am starting to feel exhausted by trying this. I am not giving up but I have been sitting on it for a week. I have thought about it everyday. I have tried to troubleshoot it in my head. It has become this mini obsession and I need to finish it before school starts.

FCC Random Quote Generator

I finished the algorithm scripting at Free Code Camp on June 19th and started the Random Quote Generator on the 20th.

I have been working diligently for a few days on it. Usually we are instructed to use the Bootstrap CSS framework. When I went searching for an API I found Chris Coyer from CSS Tricks Quotes on Design API site and was enamored with the design and decided I wanted to do the same thing.

So I mocked it up in Sketch:


I needed to really think about how to write the CSS and code for this design. I am still working on that. I have traversed the web in search of layout advice and CSS tricks 1 to move the bottom quotes to the left and at the bottom.

Originally, when I built the HTML, I had both the quotes at the top right. I kept forgetting that the <div></div> tags can place elements, nest elements, etc in the places you want them to go.

So I placed the ending quotes below the Tweet This button.


I want to either emboss the buttons or create a drop shadow to cue the user into it being a button and not just some random text. I know it says Tweet This but people like my mom have a hard time understanding that the Login button on her bank app is actually tappable and that’s how she logs in. So I need to give visuals cues that will allow the user to intuit this.


Still working on an adequate layout. I don’t want to totally rip off Chris’s site but the design is so fresh that I want to at least rip off some of the components.

I’ve gone into Chrome’s Dev Tools and poked around on his site and have gotten a feeling of how to build it.


You can see the pen at the bottom of the page. It looks weird because it is a work in progress.

  1. Pun not intended ↩︎

Free Code Camp Portfolio: Unlocked

\"JPEGSo I started the portfolio project on March 10th and finished it today. I had help from the Gitter chat but not as much as last time.

I took the example code and re-engineered it to fit what I wanted to do. I added an unordered list, a cover photo, a mailto: link and a few other things.

The thing I struggled with the most was horizontal scrolling on mobile with Bootstrap. When looking at the Pen on mobile, you had some overflow, which totally defeats the purpose of a responsive design! So I went to Google and found a few Stack Overflow articles and found the right media query along with some other css that I edited to fit my project. I used:

@media screen and (max-width: 767px) {
  body {
  overflow-x: hidden !important;
.container {
   max-width: 100% !important;
   overflow-x: hidden !important;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0px;
   padding-right: 0px;

This allowed me to negated the overflow on the x axis part of the page which is horizontal. You essentially hide the overflow. But that wasn’t enough. Adjusting the margins and padding really made the responsiveness on my iPhone so much better.

You can find the Pen below.

FCC Front-End Programming Project


So I started the second front-end programming project for Free Code Camp which is the portfolio. I shared a Pen from a former Free Code Camp alum who built an interesting portfolio, which is what Free Code Camp uses as their example, which is high-praise.

I had trouble with getting my background image to show. I had this as my html:

<div class=\"container-fluid\"><img class=\"\" src=\"\" alt=\"\" />

This didn’t make it responsive, however. So I did this:

<div class=\"container-fluid\"><img class=\"img-responsive\" src=\"\" alt=\"\" />

It still didn’t work.So I went to the Gitter chat and asked around. Someone suggested adding the image to a div and not inside a container inside another div.

So I did this:

<div id=\"mySection\" class=\"container-fluid\">

padding-top: 50px;
display: block;
height: 200%;
background: url(“”) no-repeat center fixed;
background-size: cover;
text-align: center;
padding-bottom: 100px;
color: #fff;

Someone gave me this suggestion in the Gitter chat. This made the background a sliver across the screen. He told me to play with the padding at the bottom. So I ended up with:

padding-top: 50px;
display: block;
height: 200%;
background: url(“”) no-repeat center fixed;
background-size: cover;
text-align: center;
padding-bottom: 2000px;
color: #fff;

I also found a stray div with my navigation. Now it’s starting to look good.

Completed The First Front-End Project

So I finished the first front-end project for Free Code Camp in a couple days. It doesn’t render really well on mobile. I can’t seem to get the button I have at the bottom to do the following with the jQuery I have:

$(‘.center_button’).click(function() {
‘position’ : ‘fixed’,
‘bottom’ : 0,
‘left’ : 0,
‘right’ : 0

Minimal jQuery to achieve a nice effect. It works on tablets though not quite the way it is intended.

I will probably work on it some more during the coming weeks.

On To The Next One

Our next front-end project will be a little bit more difficult and will probably take me a lot more time. Here is what the example like, down below. The scrolling of the images is janky and I am not crazy about the design but I like what he did.

Front-End Programming Project on Free Code Camp


So I am working on the front-end programming projects for Free Code Camp. The first one is a tribute page to anyone you want. I chose Carl Sagan as he is my skeptical hero and scientist “for the people”. I’ve read one of his books and plenty of his essays and I just think the guy was amazing, smart, and could relay complicated scientific concepts to lay people.

So I spent an hour working on the HTML and CSS. What I want to do is use jQuery to fade the quotes in and out when someone clicks on the page. So, essentially I need to have an even listener for mouse clicks, something like:

$( “#quote_1” ).click(function() {
$( “p” ).fadeIn( “slow”, function() {
// Animation complete
$( “#quote_1” ).click(function() {
$( “p” ).fadeOut( “slow”, function() {
// Animation complete.

I also want to make the quotes float left and be in a block. Not sure how I am going to get it done but I will. I had it in blockquotes and I may change it back.

It’s crude but I am working on it. You can find the pen here: