The goal of this course
I'm going to teach you how to be a JS developer in four weeks
Download Sublime Text Editor, and Google Chrome Browser
about 1 hour
The 10 Concepts That are The Same In Every Programming Language
Steal this code: Happy Hour App
about 2 hours
Goals for Week 2
What is the DOM? Just watch along!
DOM stands for Document Object Model. The DOM is (more or less) what we call the HTML once it all loads in your web page. Watch this video to see it in action.
querySelector lets us to grab HTML elements from the DOM.
addEventListener listens for when a user "clicks" on a button. It can also be used to listen for when the user is typing, when the page fully loads, and much, much, more.
querySelector() can grab classes too!
getElementById() and getElementsByClassName()
getElementById() and getElementsByClassName() are similar to our friend querySelector(). Watch this video to learn how they can come in handy.
Collect underpants, ?, Profit
GIF Search Engine!
Step 1: Make a Search Bar work
Variables declared inside of our functions, are not accessible outside of our function. Not without some fancy moves. Watch this video to learn more.
Which keys is the user pressing? Let's listen in.
Using the which event property we can tell if the user pressed the keys down. Actually, we can even "listen" to see what keys specifically they are typing. Let's make the NSA proud! This is 'merica goddammit and I'll listen in if I want to!
Giphy API & AJAX
What you've all been waiting for!
forEach() loops through our GIFs
Let's take all the "images" and assign pull out each "image" with the function forEach()
Homework for Week 2!
Finish the GIF Search engine!
Create a Function called Sum that Adds 2 Numbers
The fundamentals of creating a good function. Let's start by adding two numbers together
Create a Function called howManyLetters
How many letters? Create a function that answers this question.
Nobody likes the way for loops look. They're like the Elephant Man of coding. But do yourself a favor, and just learn to look past their appearance. They're a tool that will serve you well on your journey.
Using setTimeout() to Animate
about 2 hours
The SoundCloud API project!
This week we'll build a SoundCloud music app, using the SoundCloud API. Along the way we'll learn about objects, anonymous functions, Promises, classList, localStorage, and more.
Wireframe the Soundcloud Player
In this video we talk plan of attack. How do we get started?
Connecting to the SoundCloud API
Read through the API documentation, and refactor the SoundCloud code into our project.
Anonymous Functions with Nyan Cat
What's the difference between a basic "function" and an "anonymous function?" Find out in this lesson!
Let's create an Object
Functions vs. Objects? What's the difference? Come and see!
Why are we using objects?
Why use objects, when we could just as easily keep using functions?
Wrap our SoundCloud code in an Object
Of course we could wrap all our code in multiple functions, but after writing 10,000 lines of code you might be able to imagine how this could get sloppy. So instead, we'll use an object. In this video I'll show you how!
Grab some tea, and join me! In this video I'll introduce you to: classList, appendChild() and createElement()
Loop through our tracks with forEach
forEach() let's us loop through each object in the API
Finish the Card and Play Music!
Let's go back to the SoundCloud API so we can get some music playing with embed
Add a Click Event to our Button
Let's add an eventListener to our "Add to Playlist" button
localStorage allows us to save data in the user's browser
Homework for Week 3
Homework is due next Sunday @ 11:59pm EST
Your Homework This Week: Where do our U.S. tax dollars go? [SUBMIT HW HERE]
Your homework is to apply your chart making skills to something useful in your life, or in someone else's life.
Tabletop.js Final Steps
Get Your Certificate
about 1 hour
Happy Hour Explained
Push, Pop, Shift and Reverse Arrays
In this lesson we'll look at more Array methods that we can use to search and play with our data
The Map Method
Let's review forEach and compare it to Map. These are both great tools for looping through data