#JavaScript30 – Day 02

Day 2 of this challenge involved building a clock with moving hands using CSS and JavaScript. I don’t know how it never occurred to me to build a normal analog clock using CSS or JavaScript before, but I’m glad I got to.

I liked that this time, the instructor paused to say “try this last bit by yourself.”

The thing that I do love about tutorial courses is that even if you are just typing what the instructor is typing on screen, you can still learn something. For example, if I had done this project on my own, I probably would have made each hand a different function which is ridiculous – each hand is doing the same function at different time intervals. The entire point of creating functions is to cut down on repeating the same code after all. But it’s hard to see where your skills are becoming diluted when you never seek help, even in the form of a simple tutorial.

Here’s something else I learned from this project:

querySelector

Based on only the video, my best guess about querySelector is that it’s a newer and better way to select elements. I was close, but not quite there.

While you can use querySelector in the same manner as getElementByID and getElementsByClassName, it is capable of much more. Using querySelector will let you find elements with rules that can’t be expressed with getElementById and getElementsByClassName.

*

js-css-clock

 

 

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:

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/

Heck Yeah, Hackathons!

In September, I went to my first hackathon.

I’ve been racking my brain since then trying to figure out how I’m going to write up a post that adequately describes how amazing the weekend was. I went into the event very nervous and doubting myself, but I came out proud and inspired to keep going. And I have been!

The first ever Diversity Hackathon hosted by Women Who Code Austin.

Women Who Code is a non-profit dedicated to inspiring and encouraging (anyone who identifies as) women to pursue and excel in careers in technology.

The event started on Friday with a Happy Hour hosted at Atlassian. Dozens of people of varying backgrounds showed up- women, men, designers, coders, business folks, even complete tech newbies. We ate, drank, socialized, and listened to some amazing project pitches.Before the end of the night, I was actually asked to join a project as a front end developer!

Happy Hour

Happy Hour at Atlassian

We spent the next 30 hours immersed in code

The actual Hackathon was held at Captial Factory in the Omni building downtown. Captial Factory is a co-working space that is extremely popular here in Austin.

Doors to Capital Factory opened at 8AM, and, after some (delicious) breakfast tacos, we got straight to work. Our team, formed during Friday’s Happy Hour, set out to create a web app that would provide free and legal resources for marginalized tenants in the state of Texas.

Tracy, Trish, Sara, & Holly

Tracy, Trish, Sara, & Holly

LegalPal Team

LegalPal Team

LegalPal is born. Check it out!

LegalPal is the brainchild of our team leader, Sam, a student at UT. He coded our backend in Django (seemingly effortlessly, might I add). He also helped me install it on my machine and helped me learn how to use it with my HTML files.

Kenworthy and Victoria were absolutely brilliant working on UX research and UI design. Watching them work really made me want to improve in that area.

We also had help from Loyce, another UT student, and several other volunteers at the event (including a lawyer who helped steer us in the right direction).

I got to put my own front end skills to use, using HTML, CSS, and Bootstrap to code. Being the only front end coder on our team was intimidating at the start for the entire weekend. It was scary to put my skills to the test like that, when majority of my projects in the past have been from tutorials or CodePen equivalents of doodles.

A big thing that helped me out during the weekend was getting more acquainted with using the documentation. Back when I was in undergrad, I was always told “check the documentation” so it’s not exactly a new concept for me. But it always seemed like a bunch of scary words that I’d never understand because I just wasn’t smart enough to get it.  But I didn’t have time to get frustrated, so I had no choice but to zone in, focus, and do the best I could to get it. And I did!

Even as time was running out and I was starting feel like I would never finish, I figured it out, pushed it to GitHub and took a huge sigh of relief.

Our team won for Best Socially Innovative for LegalPal!

Holly + LegalPal team

Not only was it awesome to win something, but most of us were hackathon newbies and we won for such a great reason. Prizes were a mini remote control drone from Go Daddy and some cash.

The entire weekend was a blast, and gave me a boost of confidence and motivation. I’ve been hard at work since then completing challenges at Free Code Camp, including my first Basic Front End project, a Portfolio Webpage. I actually can’t wait to get to the harder challenges and crush them! 🙂