Marcus Peterson

Ugly Things API Documentation

The Ugly Things API is something we built to help students create web applications with a completely open API to use. Have fun! And don't get too crazy on it... The baseUrl is: https://api.vschool.io//thing[/] (Where is your actual name, i.e.: https://api.vschool.io/jonsmith/

Starting a Group Project on Github

When you start your group project you are going to need to create a repository that you can all work on together. This write up will instruct you on how to set that up and begin collaborating. First, go to Github and select New Organization Next, Select Free The name

It's a Start Up

You and 2 friends decided to start up a business. You know you need a website, but you're bootstrapping your business without external funding, so you can't pay someone else to do it. The type of business doesn't really matter, so get creative with it. This will be a static

Don't bug me I'm on vacation

Your goal for this exercise is to use the debugging techniques we have taught you to fix this project. Copy the following code into your terminal # First `cd` into your assignments folder and then into your exercises folder git clone https://github.com/VSchool/vacation-bug.git cd vacation-bug # Copy/paste

Debugging Part 2

One of the most important and useful tools for debugging are the Chrome Dev Tools(or the equivolent on other browsers). The tabs we will use most frequently for debugging are: * Console * to see our console logs * to see any errors that may show up * Sources * to check our file

Debugging Part 1

One of the first and most natural types of debugging is just looking through our code for typos, misused variables, or errors given to us by our text editor. In the screenshot below we will see some examples of errors given by our text editor. Take a minute to look

`this`: the keyword

This is going to be a very brief overview of the keyword this, if you finish and would like to read about it more in depth you can do so here. First let's look at the keyword this in a constructor function in Vanilla JS. function Person (name, age, hairColor)

React Event Listeners

Handling Events Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: * React events are named using camelCase, rather than lowercase. * With JSX you pass a function as the event handler, rather than a string. //HTML Say Hello! //JSX Say Hello!

Mocha & Chai: Your first test

Mocha Mocha is a test runner. It's sole job is to look for (or be told where to find) unit tests you've written, and to execute them. It also displays in a nice, easy format to show you how your unit tests faired - how many passed, how many and

Building a Bar Chart - HTML, Vanilla JS, D3

We are going to teach you how to build a basic bar chart in this write-up 3 ways. * Statically, * Using only HTML * Dynamically, * Using Vanilla JS * Using D3 HTML First, let's look below at the code of a completed Bar Chart.

D3: The Mighty Data (visualization)

Parts of this write-up come from the beautifully written scrimba course found here and also from the D3 docs This is an intro to D3 What is D3.js? * An Open Source JavaScript Library * Helps creating visual representations of data * Uses HTML, CSS, and SVG * Viewable on modern browsers * An

Higher-Order Functions

In programming, a higher order function either * takes one or more functions as an argument or * outputs a function Functions in JavaScript are just values, so they can be easily passed into and returned by functions. The Bare Bones Higher Order Functions are typically methods. Methods - Methods are functions

Managing a Heavy Workload

During these first few weeks you will be receiving a large amount of assignments including warmups, exercises, and projects. It can feel quite overwhelming and may likely induce some anxiety and stress in some of you. That is when doubts may start to bubble to the surface about whether you

Daily Teaching

You are going to take 5-10 min to go over a topic in front of the class. The topic will be one that we have already taught in class, you are just doing a quick review of it. Some ideas for structuring your review/lesson are listed below. 1. Quickly

Flexbox Full Tutorial

This write-up is taken from the beautifully built course here: https://scrimba.com/g/gflexbox Below are the 3 files used in this tutorial index.html

CSS Variables

This write-up is taken from the beautifully built course here: https://scrimba.com/g/gcssvariables CSS Variables are specific values to be reused throughout a document. They make your CSS more readable and make it more efficient for making changes later on in big documents. Let's see how to use

React Router Nested Routes

A common paradigm when creating web applications is to have a "list page" and a "detail page". Consider a product search on Amazon. The results that show up from the search is a list of products with some information about each (price, ratings, title, part of the description, etc.). When

CSS Grid

This write-up is taken from the beautifully built course here: https://scrimba.com/g/gR8PTE This will give you a brief rundown of the main functionality presented with CSS Grid and hopefully a simple explanation of how to implement it yourself. If you want the cool color scheme below add

Bootstraps bootstraps

For this exercise you will install the default bootstrap navbar, but rather than using exactly what they give you, you get to make some changes to make the navbar more customized to your liking. After installing the default navbar, go through and make sure that your navbar meets all of

Bootstrap Navbar

Bootstrap provides a broad variety of useful tools which not only decrease the amount of time you spend writing code, but also increase the aesthetic appeal of your webpage. Something almost every website you create will have is a navbar. Lucky for us bootstrap comes with a navbar which we

Nested Loops

Nested loops are a very useful tool that we have access to in JavaScript. They can be used for a variety of things, such as accessing/creating matrices, or building a game similar to Battleship using a grid like system. Multidimensional Arrays We refer to arrays inside of arrays as

Strunctions

"It's like a function but for strings!" - Dan Hitt Let's Practice String Methods. Implement all of the listed String Methods below using at least 3 unique Functions. String Methods .concat() .indexOf() .lastIndexOf() .match() .replace() .slice() .split() .toLowerCase() .toUpperCase() .substr()

String Methods

Now that we are familiar with Strings and Functions we are going to teach you about String Methods. Now methods are essentially just functions that are built within the scope of an object. When people say function they are typically referring to a function on the global scope, whereas a

Penguins vs. Bugs

Huzzah! More debugging exercises! See if you can find all the bugs in this broken Penguins v. Communists project and get it to run properly. Click here and download/unzip repository.

Bugs on a Plane

Fun Times! We get to practice more debugging! Follow the commands below to download the buggy program and go through it squashing any bugs you find until it works correctly! There will be both syntactical and logical errors. To download this code, run the following code one line at a