30 days of Javascript – Part 2 of 6

30 Days of Javascript

This is part 2 of 6 of my Javascript 30 by Wes Bos. It’s a free course and it accomplishes two things: 1) It pushes you to code every day and 2) it gives you bite-size challenges of Javascript to practice. The best way to really learn to code is to do it over and over again every day even if you make mistakes.

If you missed part 1 of my review, check it out here.

This has to be the best course I’ve ever taken on Javascript and I’m only 6 lessons in. I am having the most fun with these lessons. It really gets the wheels turning. I find the steady mix of styling and logic in real environments incredibly enriching.


Day 6 – Ajax type ahead

So in this lesson, we learn that the browser has a fetch() method built in to the native API which returns a promise. So instead of doing a callback function, we can do a .then() which is much cleaner.

Remember, this is vanilla javascript. Gone are the days of using $.getJSON() for AJAX. We grab the data using the fetch() method. Then we return two promises, one for the entire blob of data blob.json() and the other to push all that data into the empty cities array using the spread (...data) operator. ES2015 FTW!

A bit of Regex going on here, which if that is not intimidating to you, then you are a special kind of special. We use it here to match what we’re typing with the city and state results, as well as highlighting the words as we type and check for commas in the population. Wes’ pronunciation of RegExp really had me tickled.

This one I had to do a second time. There was just so much here. Wes challenged us to use the data for more things like geocaching and choosing a city closest to us. Since we’ll get into that later on down the line, I’ll add that feature when we cross that bridge. For now, I just added a fun fact section when choosing a city, such as where the city ranks in size and how much it has grown from the years 2000 – 2013. For example, if you search for Austin you can see how much our beloved city has grown in such a short time. Ridonculous.

See the Pen Ajax Type Ahead by Stephanie Denny (@stephanie_denny) on CodePen.0


Day 7 – Array Cardio Day 2

Massaging your data, more Array practice! Given a small set of data using some names, birthdates and a list of comments, we covered:

  .some();
  .every();
  .find();
  .findIndex();

We checked to see if anyone is over the age of 19, and listed everyone over the age of 19. We also checked a specific comment by ID and found where it was in the Array. Lots of great real-world scenarios!


Day 8 – Fun with HTML5 Canvas

The repetition between the lessons while introducing something new each time is both refreshing and powerful. Many things that I struggled to wrap my head around are finally starting to click, especially when used in context within the browser. Not to mention the fun factor. Who doesn’t like playing with beautiful colors and paint strokes? Remember Corel Paint? ‘Tis my childhood. Wes ties in a number of canvas methods with several mouse events. Oh, the possibilities are endless! You could easily get lost in this lesson for hours and build a Photoshop-esque boutique for all sorts of artistic fun. I can already envision building one for my daughter who is colorfully inclined. I may have to revisit this and combine it with the fun of Lesson 3 – CSS variables to generate some more canvas fun. Go ahead, draw yourself a picture below.

See the Pen Fun with HTML5 Canvas by Stephanie Denny (@stephanie_denny) on CodePen.0


Day 9 – Dev Tools Domination

I love having extra dev tools in my toolbelt. I have a whole new appreciation for the console. I mentioned how much I loved console.table(); in an earlier review. My favorites for this lesson are console.group() which can be written like so:

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
  
  console.group('${dog.name}')
      dogs.forEach(dog => {
        console.log(`${dog.name} is ${dog.age} years old, that is ${dog.age * 7} in dog years`);
        console.groupEnd('${dog.name}');
      })

This is super handy for printing out large pieces of information without console.log-ing over and over again.

The other one I liked was console.time():

console.time('fetching data');
      fetch('https://api.github.com/users/wesbos').then(data => data.json()).then(data => {
        console.timeEnd('fetching data');
        console.log(data);
      });

Great way to see what’s hanging up your AJAX requests without leaving your browser window.


Day 10 – Hold Shift and Check Checkboxes

This one was a head-scratcher. I had to do this one a number of times. Between saying checkbox and typing checkbox, the word itself started to look misspelled. Check… Box? Hmmm.

We use a flag variable like we did back in Lesson 8 – Fun with HTML5 Canvas, where we declare a variable as true/false and then it changes depending on the function or condition.

First, we check if the checkbox is checked AND the shift key is held down:

if(e.shiftKey && this.checked){
    //stuff happens
  }

Then the magic happens when we loop over all the input elements (tired of saying checkboxes, haha):

checkboxes.forEach(checkbox => {
        if(checkbox === this || checkbox === lastChecked){
          inBetween = !inBetween;
        }
        if(inBetween){
          checkbox.checked = true;
        }
      })

What?!
See the inBetween? That’s our flag variable. It gets turned on/off depending on if the input elements fall between the one the user is clicking on and the last one clicked.

See the Pen Hold Shift and Check Checkboxes by Stephanie Denny (@stephanie_denny) on CodePen.0

How it does that exactly is still leaving my head spinning. But like the previous lessons, the fog will lift. Trust the process. Keep coding! I am 1/3 of the way through and I cannot wait to see what’s next.

More code:

Check out Part 3 of the Javascript 30 challenge. Or head over to Wes Bos’ course and give it a try for yourself.

Advertisements

Leave a Reply

Your email address will not be published. Required fields are marked *