Day 35 (Okay, it’s actually Day 37 but still…)

I think I’ve figured it out guys

I’ve been concerned for a while about getting stuck on projects, challenges, and even tutorials. It just felt like something wasn’t clicking for me and I wasn’t progressing.


There are plenty of people who think algorithm practice is completely useless. When I was looking for resources, the advice was typically “just build something.” That was my problem though – I was “just building something” and clearly missing something in the foundation. I tried switching up courses, switching up languages,

One of the videos I was watching reminded me of one of the Algorithm Scripting Challenges I had been stuck at on Free Code Camp. After working at it for some time, I had passed half of the requirements, but nothing I did got the other half to pass. So I Googled.

As I looked at other people’s code and FreeCodeCamp’s solutions, I realized that none of the solutions looked quite like mine. That’s not inherently a bad thing – there can be dozens of ways to solve one problem. The reason that it bothered me though was that the other solutions used methods I didn’t even think to use and/or had forgotten about. Then, I realized that while I could read the code, it was challenging for me to really interpret and understand it.

Light Bulb moment

When I got stuck on previous Algorithm challenges, I would refer back to challenges I had already passed for clues, or even the Basic JavaScript exercises. So, that’s what I did – I started opening up older scripting challenges to see if any of them were similar in nature. Next thing I knew, I started trying to solve them again. Suddenly, I knew exactly what I needed.

As a result, I’ve spent the past week or so practicing algorithms instead of finishing the course I had intended to finish. But, honestly, this is the most accomplished I’ve felt in the past 37 days.

Goals for Day 40:

  • Complete ES2015 – I am more than halfway done with this course (55 minutes left)  with a weekend ahead of me and it is 100% doable.
  • Complete 2 Algorithm challenges a day.
  • Research other resources to help keep up with Algorithm practice.
    I know that there are some “coding dojos” out there – I’ve used CodeWars this week. What’s your favorite? Which would you recommend?

#JavaScript30 – Day 04

Day 4 consisted of what Wes called JavaScript cardio – exercises in JS.

The focus on this video was arrays and 4 array functions:


filter() will create a new array with all of the elements from another array that pass a test from a function.


The map() method takes in an array, performs a functions for each element in the array, then returns a new array of the same length.


Using sort() will sort the elements of an array inside of the array. It will take 2 items at a time, determines if one is a higher value, then will place them at a higher or lower index respectively.


reduce() performs a function against each value in the array and an”accumulator” (like a running total), then reduces it to a single value.


They’re all functions that I have seen in solutions for JS exercises in places like Free Code Camp  and HackerRank, but never really understood how or why they are used. And, even though I can tell you what they do, I could still use some work getting more comfortable actually working with these methods. Now that I’ve done this exercise once while just following along, I plan on going back to exercises like these to attempt to solve them on my own. I also have ideas on how to solve at least one of the FreeCodeCamp algorithm scripting challenges I’ve been stuck on.

#JavaScript30 – Day 03

On day 3, we played with some CSS and JavaScript to create a set of sliders that control the frame of the photo on the page, the blur of the photo, and the color of the border (and the JS in the title).


  • :root – the document’s root element. That would be HTML.Working with HTML documents, there’s not much difference between using root or html. But, from what I can tell, there are other document types where using root would be a good option.
  • –base – I had no idea that ‘vanilla’ CSS had variables. We declared these variables inside of the :root styling to make them available to the entire document.
    I haven’t found any info that suggests it’s new to CSS3, which is even more surprising. Using variables is one of the many reasons I’ve enjoyed using Sass. Now, I have more basic CSS I can get better at using.


querySelectorAll returns a nodeList of all elements that match the query. nodeLists don’t have very many properties, and a limited number of functions you can perform on them. We don’t really talk about it until day 4, but you can convert a nodeList into an array if needed.


This targets the data attributes referencing a data-* element.


#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:


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.





#JavaScript30 – Day 01

Earlier last week, I saw a tweet that linked to a course called #JavaScript30, a 30 day JavaScript coding challenge. You build 30 things in 30 days with 30 tutorials using Vanilla JavaScript.*

When I registered, I fully expected the first project to be full of JavaScript 101 things like defining what a variable is. This isn’t a JavaScript 101 course though. It’s targeted at people who are already familiar with JavaScript and want to become more comfortable with Vanilla JS and working with the DOM. Has my name written all over it.

I immediately loved that I was hearing new terms and seeing them in action.




As far as I had always known, you use either single quotes or double quotes for strings. So I was a little bit confused when Wes switched out his single quotes for backticks. And I’ve used a backtick so little in life that I couldn’t remember where it was on my keyboard right away (if you don’t know/remember either, it’s the same button as the tilde up on the top left).

Using backticks is a new ES6 thing to make working with strings easier. When you wrap your text in backticks instead of quotes:

    1. They can be multi-line!
    2. You can interpolate variables in them.
      console.log("I'm " + age + " years old!"); can be written instead as console.log(`I'm ${age} years old!`);

data attributes

The data-* attribute is used to add custom, private data to your HTML. The asterik(*) can be replaced by any term and the value will be a string. Like this: <element data-*="somevalue">. 

The custom data attribute can then be used in the page’s JavaScript to create a more dynamic user experience without using something like AJAX. Data attributes should only be used when no suitable HTML5 element or attribute exists.

const versus var

If you’ve ever even touched JavaScript, you probably know that you use var to crate a new variable. Well, ES6 introduced 2 more ways of of creating variables in JavaScript: let and const.

Short for constant, const variables cannot be reassigned. If you declare const x = 100 , you can’t reassign x to anything else anywhere else in the DOM. It should be used if you absolutely don’t need to reassign it anywhere else in your code. Otherwise, you’ll want to use let.

Letting go of using var will take some time(or maybe none at all for some people), but it’s cool to know that there are other options now.


If you’re like me and like to use jQuery, you probably utilize the addClass() method when you want to assign a new class to an element. With vanilla JS, you can use classList.add() instead. Both functions append a new class name to the list of classes the element already has.

setTimeout versus ‘transitionend’ event

Wes predicted that the solution I probably came up with as a viewer was to use setTimeout. Then he showed us a better way to do it. With setTimeout, the duration has to be set in both the CSS and the JS files. This makes both of them less maintainable and prone to errors. Imagine: you’re working on a project with other people and someone decides to change the animation duration in the CSS but doens’t change it in the JS code. Chaos.

There’s an event called transitionend which, as you can probably tell, is fired at the end of a CSS transition. Not only does it keep errors down, but it’s less complicated code. Win.



By the end of the video, not only did I learn a few new things, but I got to build a pretty cool JavaScript Drum Kit. I also built a landing pagefor my project, where you’ll be able to see links to all 30 projects as I add them.

*Vanilla JS - Plain old JavaScript without the use of frameworks or libraries like jQuery.

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


    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)



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!