For any task at hand, it helps to have the right tools for it. While you can code in a simple text editor, it is best to use an editor that is more suited for writing code. We use Sublime Text 3 in the course, but you can use any editor you prefer like Visual Studio Code, Atom, WebStorm, etc. We also recommend you install the Google Chrome Browser.
In computer programming, comments are annotations in the source code of a computer program that are added with the purpose of making the source code easier for humans to understand, and are generally ignored by compilers and interpreters. You should add useful comments to your code to explain what the code does to make it easier for another programmer (or your future self) to go through the code and understand what it's doing and how it works.
In programming, a variable is a storage location paired with an associated symbolic name, used to store information to be referenced and manipulated in a computer program. You can think of variables as containers that hold information. Their sole purpose is to label and store data in memory, which can then be used throughout your program.
Concatenation (or concat for short) is a way of combining the text of two strings together into a variable. Watch the example in this video—as it's much easier to understand when you see it in action.
In programming, a function is a named section of a program that performs a specific task. A function groups together one or more program statements that perform some operation(s) and optionally return a value.
Often a computer program must make choices on which way to proceed. Conditional statements are features of a programming language which perform different computations or actions depending on whether a specified boolean condition evaluates to true or false.
One thing you can be sure of when coding: you will encounter bugs. Let's learn how to deal with them. In this lesson, we look at various tools available to help us in debugging our code. You will learn how to log out messages to your browser's console and how to use the Developer Tools available in your browser to inspect and identify issues in your code.
Let's look at what we're doing this week. This week, we'll learn how to manipulate the DOM (don't worry, you'll soon find out what that is). We'll learn this while working on a GIF search engine. By the end of the week, you'll be well acquainted with these terms: innerHTML, querySelector, getElementById, addEventListener, DOM manipulation, keyCode, AJAX, JSON.parse, forEach, API documentation.
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. It is the data representation of the objects that comprise the structure and content of a document on the web. Watch the video to see it in action.
querySelector lets us grab HTML elements from the DOM. It returns the first Element within the document that matches the specified selector or group of selectors. If no matches are found, null is returned. querySelector() only returns the first element that matches the specified selectors. If you want to get all matches, use the querySelectorAll() method instead.
The addEventListener() method attaches an event handler to a specified element. It can be used to listen for when a user clicks on an element, when a user is typing, when the page fully loads, and much, much, more.
Let's keep grabbing things with the querySelector(). We had previously used querySelector with an element selector. In this lesson, we'll use a class selector instead.
getElementById() and getElementsByClassName() are similar to our friend querySelector(). getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique in a page, they are a useful way to quickly get access to a specific element. An ID should be unique within a page, however, if a page has more than one element with the specified ID, then getElementById() returns the first element that matches. If no elements with the specified ID exist, it returns null.
Time to put your knowledge to the test. The lesson starts off with a challenge for you. Try to solve it yourself before continuing with the video which walks you through a solution.
You'll be given another challenge. Again, try to work through it on your own before watching the solution.
Loops offer a quick and easy way to do something repeatedly until a certain condition is met. They can be used to execute a block of code a number of times.
The setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires. Watch on as we use it to animate the appearance of cats on the page.
We finally get started on our GIF Search Engine. You'll download a template project and start building from there. The first task is to grab the user's input from the HTML Search Bar. Let's jump right in!
Using the which event property we can tell if the user pressed the keys down. Actually, we can even "listen" to see what specific keys they are typing. Let's make the NSA proud! This is 'merica goddammit and I'll listen in if I want to!
We use forEach() to loop through the images that we are getting from the API and then add each image to the DOM. When we are done, you'll have a grid of GIFs on your page after a successful search request.
In this lesson, we look at more Array methods (push, pop, shift and reverse) that we can use to search and play with our data. The push() method adds new items to the end of an array and returns the new length. The pop() method removes the last element from an array and returns that element. The shift() method removes the first element from an array and returns that removed element. The reverse() method reverses an array in place.
Let's review forEach and compare it to Map. These are both great tools for looping through data. forEach() executes a provided function once for each array element while map() creates a new array with the results of calling a provided function on every element in the calling array. They both do almost the same thing, but the major difference is that forEach() affects and changes our original Array, whereas map() returns an entirely new Array—thus leaving the original array unchanged.
Adding images is quick and easy. Watch on as we make our Party Tips page more interesting by adding some images to it.
Welcome to this code review and refactoring session. We'll go through a student's project, answer some questions she had, review the code and improve it a bit. In the video, we touch on the URL query string, clean up the code, and hook up the click event to the API.