Free Code Camp – Local Weather App (FINISHED!)

I guess doing something new really was the way to kick myself into gear. A few days later and I have successfully fufilled all user stories for this project on Free Code Camp.

  1. User Story: I can see the weather in my current location.
    When you load the app, it will request that you share your location. If you hit “Allow,” it will display your current city/town and the weather there. If you deny, it should throw an error at you.
    I do this by using

    navigator.geolocation.getCurrentPosition

    to send a notification to the user that requests the location. Then, there’s an AJAX function that takes in the coordinates from the navigator, returns the weather for those coordinates (in Fahrenheit), the weather conditions. It also converts those coordinates to a city and state, and displays those on the page.

  • User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather. 
    I used this icon set by Erik Flowers and Lukas Bischoff. to display icons that match the current weather conditions. When I first started coding, the weather here in Austin was consistently ‘clear’ so I had no idea if it actually worked well. Then, when I took the screenshot, I noticed it had changed to “Partly Cloudy.” Yay!
    They have nice functionality that works with the Weather Underground API, and some other popular APIs as well.
  • User Story: I can push a button to toggle between Fahrenheit and Celsius.
    When you hover over the temperature, the cursor will change to indicate that it is clickable. When you click it, it toggle between Celcius and Fahrenheit.

And, now, I have a functioning weather app! And I never would have gotten it done if I hadn’t been willing to shift my focus elsewhere for some time.

I noticed when I went for my screenshot that it displays the weather in decimals, which I don’t typically see (or look for) in weather apps. I am considering adding some code to round that number to the nearest whole number.

Screenshot 2016-02-29 23.14.10 (2)

AJAX and APIs

 

I followed my last thought from my previous post and, instead of spinning my wheels and staying stuck, I decided to do something new. This past weekend, I completed the Intro to AJAX course on Udacity.

I got to build a basic web app that allows the user to put in a potential future address, street and city. Then, I used Google Maps to load an image in the background for the address.And I used the New York Times and Wikipedia APIs to pull up articles relating to the specified city.

Screenshot 2016-02-27 13.52.39 (2).png

At the end of this course, I definitely didn’t find myself any closer to figuring out the Pomodoro Timer. I did, however, know exactly what project I could work on instead: a Local Weather App. For this app, the browser will ask the user for their location. Once they hit “allow,”  your location, current temperature, and current weather conditions display onscreen (if you deny, it should throw an error).

It’s not the most visually exciting app right now, but I FIGURED OUT HOW TO MAKE IT FUNCTIONAL ALL BY MYSELF! BOOYAH!

I have used AJAX for another course in the past, but never quite got it. This time, I was able to navigate my way around the web (and my brain I guess) to get this working. Switching up my focus was incredibly helpful this past week, and probably one of the best ideas I’ve had lately.

Screenshot 2016-02-27 17.00.38

 

You can check out the current CodePen below!

Pomodoro Timer (Pt 2)

This should really be titled as Part 1, since I’ve started from scratch on this project. Again. But, I have technically been working on this for a while so technically this is still part of my progress for this project.

Starting Over

At the beginning of February, I decided that I would much rather start over with a clear head about this project than continue to build on something that frustrated me just by looking at it.

I have been working on this project by breaking it down into smaller parts to tackle at different times. On day one, I started with just the HTML.  It was boring and uneventful, but it made me be aware of how I wanted my content structured. Should this be a div or a span? Should that be in one div or separated into two?

Screenshot 2016-02-06 14.35.16 (2)

Next time, I gave it some Sass. I am becoming comfortable using Scss for my CSS. It keeps everything so organized and nice to look at. I also added Bootstrap, mostly for the styling and glyphicons for buttons. I added the fancy Lobster font for my header too.

Screenshot 2016-02-05 20.41.30 (2)

User Story: I can customize the length of each pomodoro.

Each project on Free Code Camp is given user stories that must be satisfied in order to complete the project. This week, I completed one of them: customizing the length of each pomodoro. In other words, you can now click the plus or minus signs and watch the values for work and break sessions change.

CodePen recently added a console to the interface. You can access it by changing that last 0 in your project’s editor url to a 1. You can also change the visibility of the other text windows by changing the other 3 values in the url.

Screenshot 2016-02-06 14.16.16 (2)

So far, separating tasks like this has been helpful. I multi-task a lot in my daily life, which wasn’t a good thing for this project. Jumping around between different tasks was leading me to more confusion instead of solving anything.

You can view the live version below:

I Made A JavaScript Calculator!

Happy New Year!

This new year has gotten off to a pretty good start for me. I have finished my JavaScript calculator, which can be viewed live on CodePen here.

The user stories I had to fufill to complete the challenge:

  1. Add, subtract, multipy and divide two numbers.
  2. Clear the input field with a clear button.
  3. Chain mathematical operations together until hitting the equal button, and still get the correct output.

I realized from working on my Pomodoro clock that I sometimes get caught up with “making it pretty” that I was losing focus on making it work. So, once I created my basic buttons and display, I left the styling bare to finish later. I feel like this worked to my advantage in keeping me focused on one task at a time.

When it came to making my buttons functional, I knew that I would need to store the keys being clicked by the user as well as make them display on the screen. It actually didn’t take long for me to get that part working. The hard part was really getting the calculator to evaluate the input. I started off trying to use methods to take in the input as one long string, converting it to integers and operators, then evaluating them. I was spinning my wheels for a bit.

After consulting the Google gods, I discovered that there is actually a method called ‘eval’ that can simply evaluate a string as an equation. Bingo! So far, I haven’t been able to break it and I haven’t gotten word that anyone else has broken it yet. Sounds like a success to me!

I used Palleton to find a triad of pastel colors and a couple Google Fonts to give my calculator some life.

Pomodoro Timer (Pt 1)

I am now on the Pomodoro Timer challenge on Free Code Camp and, let me tell you, it’s much more challenging than I anticipated.

After a few hours of plugging away at my keyboard, I now have a nice interface set up, my buttons to set the session and break lengths work, and, if you click the start button at the bottom, the number in the middle of the circle will count down to 0.

Left to do:

  • The counter in the circle currently counts down by seconds, but the number that is there is supposed to represent minutes. I need to display a looping counter of 60 seconds and decrease the minutes every time it loops.
  • When I click the Pause button, the timer should stop. Right now, it does virtually nothing. It’s a useless button. I thought that using clearInterval() would stop it, but evidently not.I managed to figure this one out while writing the post. The setInterval returns an ID which has to be used with clearInterval in order to stop it.
  • Create a working reset button. When a user clicks reset, the number in the circle should reset to the given session length. Right now, this button is useless.
    I had the thought to use a true or false value to check if the timer was running or not.If the timer isn’t running, then the user can reset it.
  • Implement the break session. I have to set it up so that when the countdown for the session reaches 0, it will start counting down on break time. I’m currently assuming that functions could be the same, with slightly varying values.

 

Oops!: I Fixed a Bug in My Random Quote Generator

Turns out, my Quote Generator wasn’t quite complete. I tweeted it out for all the world to see, and @FreeCodeCamp caught something I missed.

When I was first coding this project, I was trying to use a for loop to cycle through all of the quotes. I took it out once I realized that I didn’t want to cycle through since I’m using randomized values. So, for a second, I thought I screwed something up and the code reverted back to that point.

I clicked the button a handful of times and it seemed to be working as expected. But clearly there was a problem somewhere, so I kept clicking. Lo and behold, my quote div completely disappeared!

In my last post, I mentioned how Bonfires are helping me get better at approaching solving these problems. I’m also getting better at debugging. I instantly opened the console to look and see what happened when I clicked my generator button. I printed to the console log to show me when it generated a number and when it displayed successfully. It took about 15 tries before my code broke and I got that cute little error box that told me what was wrong.

This is my code before:

var x = Math.floor((Math.random() * quotes.length) + 1);

And this is my code after:

var x = Math.floor((Math.random() * quotes.length - 1) + 1);

Can you spot the difference?

Turns out, I wasn’t giving my code a proper range to pull the number from. Although quotes.length might equal 13, that also means that I need the random number to stop at index 12. My code was including 13, which doesn’t exist, and broke my generator.

Thanks again to Free Code Camp for finding that error for me. It’s always a little disheartening when you are proud of a project then someone finds a flaw that you missed. But, I’m learning it’s actually pretty difficult to accurately test your own code. My goal was to make my code work, so I tested it to make sure it worked and it did. But when FCC tested it, they tested it to see if it would break; something I didn’t even think about.  After realizing that, I ran my generator over and over again until I was sure there would be no more errors (over 300 times!).

Here’s my now fully functioning Random Quote Generator.

http://codepen.io/cerita/full/BoMzLr/

Bonfire + Comparing Myself To Others

I have made it to Free Code Camp’s Algorithm Practice challenges, cleverly titled ‘Bonfire!’

The first Bonfire challenge is to reverse a string. Simple enough.

Then I realized that I couldn’t solve it instantly and found myself thinking “this is so easy. You should know this by now!”

Counting the time I spent pursuing my degreee in CS, I’ve been learning to program for about 5 years now. And it’s still hard to me!  I watched my classmates seem to make it through classes with ease, while I struggled the entire time (sometimes to the point of tears). I think that’s why I am still very hesitant about pair programming, which Free Code Camp highly encourages. My professors required encouraged it too. But I always hated pairing up with someone because I always felt like the weak link. It seemed like no matter how hard I tried, I couldn’t keep up with everyone else.

And, now, I watch how other Code Newbies go from 0 former knowledge to full stack developers in less than a year! While stories like that helped inspire me to pursue (re-pursue?) web development, I also find myself discouraged at times. Part of why I got burned out before was that I was trying to “keep up” with the progress I saw others making.

Maybe I should know how to reverse a string off the top of my head. But I don’t. My choices were to either quit or to find myself a solution. Only one of those choices would get me where I want to be so, I bulldozed my way out of negative thought zone, and found myself in JavaScript documentation, trying to figure out what the hell I was doing.

It actually didn’t take long for me to research and come up with a solution. A PASSING solution. And now, I don’t know why I was so hard on myself to begin with. Not all solutions will come to me as quickly and I’ll probably definitely find myself frustrated plenty of times with future challenges, but I will get through them. With plenty of help.