16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/solution-code/03-person-constructor-function/app.js:
--------------------------------------------------------------------------------
1 | function Person(initialName) {
2 | this.name = initialName;
3 | this.species = "Homo Sapiens";
4 | this.speak = function() {
5 | return "Hello! I'm " + this.name;
6 | };
7 | }
8 |
9 | var adam = new Person("Adam");
10 | var bob = new Person("Bob");
11 |
12 | console.log(adam.name) // "Adam"
13 | console.log(adam.speak()) // "Hello! I'm Adam"
14 |
15 | console.log(bob.name) // "Bob"
16 | console.log(bob.speak()) // "Hello! I'm Bob"
17 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/starter-code/03-person-constructor-function/app.js:
--------------------------------------------------------------------------------
1 | function Person(initialName) {
2 | this.name = initialName;
3 | this.species = "Homo Sapiens";
4 | this.speak = function() {
5 | return "Hello! I'm " + this.name;
6 | };
7 | }
8 |
9 | var adam = new Person("Adam");
10 | var bob = new Person("Bob");
11 |
12 | console.log(adam.name) // "Adam"
13 | console.log(adam.speak()) // "Hello! I'm Adam"
14 |
15 | console.log(bob.name) // "Bob"
16 | console.log(bob.speak()) // "Hello! I'm Bob"
17 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/solution-code/01-car-objects/app.js:
--------------------------------------------------------------------------------
1 | var celica = {
2 | model: 'Toy-Yoda Celica',
3 | color: 'limegreen',
4 | fuel: 100,
5 | drive: function() {
6 | this.fuel--;
7 | return 'Vroom!';
8 | },
9 | refuel: function() {
10 | this.fuel = 100;
11 | }
12 | }
13 |
14 | var civic = {
15 | model: 'Honda Civic',
16 | color: 'lemonchiffon',
17 | fuel: 100,
18 | drive: function() {
19 | this.fuel--;
20 | return 'Vroom!';
21 | },
22 | refuel: function() {
23 | this.fuel = 100;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/starter-code/01-car-objects/app.js:
--------------------------------------------------------------------------------
1 | var celica = {
2 | model: 'Toy-Yoda Celica',
3 | color: 'limegreen',
4 | fuel: 100,
5 | drive: function() {
6 | this.fuel--;
7 | return 'Vroom!';
8 | },
9 | refuel: function() {
10 | this.fuel = 100;
11 | }
12 | }
13 |
14 | var civic = {
15 | model: 'Honda Civic',
16 | color: 'lemonchiffon',
17 | fuel: 100,
18 | drive: function() {
19 | this.fuel--;
20 | return 'Vroom!';
21 | },
22 | refuel: function() {
23 | this.fuel = 100;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/05-04-CRUD/solution-code/style.css:
--------------------------------------------------------------------------------
1 | body,html {
2 | width: 100%;
3 | height: 100%;
4 | }
5 | body {
6 | color: black;
7 | background: url(img/bey.jpg);
8 | background-size: 100% 100%;
9 | background-repeat: no-repeat;
10 | }
11 |
12 | .vote-count {
13 | position: relative;
14 | top: -.15em;
15 | }
16 |
17 | .panel-heading {
18 | color: black !important;
19 | }
20 |
21 | .nav {
22 | border-radius: 0;
23 | }
24 |
25 | .nav__title {
26 | color: white;
27 | margin: 1em;
28 | }
29 |
30 | .fa {
31 | cursor: pointer;
32 | padding-left: 3px;
33 | }
34 |
--------------------------------------------------------------------------------
/05-04-CRUD/starter-code/style.css:
--------------------------------------------------------------------------------
1 | body,html {
2 | width: 100%;
3 | height: 100%;
4 | }
5 | body {
6 | color: black;
7 | background: url(img/bey.jpg);
8 | background-size: 100% 100%;
9 | background-repeat: no-repeat;
10 | }
11 |
12 | .vote-count {
13 | position: relative;
14 | top: -.15em;
15 | }
16 |
17 | .panel-heading {
18 | color: black !important;
19 | }
20 |
21 | .nav {
22 | border-radius: 0;
23 | }
24 |
25 | .nav__title {
26 | color: white;
27 | margin: 1em;
28 | }
29 |
30 | .fa {
31 | cursor: pointer;
32 | padding-left: 3px;
33 | }
34 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/solution-code/07-oop-monkey-js/lib/monkey.js:
--------------------------------------------------------------------------------
1 | // don't forget to use module.exports to export your resulting Monkey constructor!
2 |
3 | var Monkey = function(name,species){
4 | this.name = name;
5 | this.species = species;
6 | }
7 | Monkey.prototype.foodsEaten = [];
8 | Monkey.prototype.eat = function(food){
9 | this.foodsEaten.push(food);
10 | }
11 | Monkey.prototype.introduce = function(){
12 | return "Hello! My name is " + this.name + " and I am a " + this.species + ". I have eaten " + this.foodsEaten.join(", ")
13 | }
14 | module.exports = Monkey
15 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/solution-code/pixart_js/style.css:
--------------------------------------------------------------------------------
1 | @import url(http://fonts.googleapis.com/css?family=Monoton);
2 |
3 | .brush {
4 | width: 100px;
5 | height: 100px;
6 | background: #1B4370;
7 | margin: 15px auto;
8 | }
9 |
10 | .square {
11 | float: left;
12 | width: 10px;
13 | height: 10px;
14 | background: #E7E5DB;
15 | margin: 0;
16 | }
17 |
18 | h1 {
19 | font-family: Monoton;
20 | font-size: 48px;
21 | text-align: center;
22 | }
23 |
24 | .controls {
25 | text-align: center;
26 | }
27 |
28 | body {
29 | background-image: url('ps_neutral.png');
30 | }
31 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/starter-code/pixart_js/style.css:
--------------------------------------------------------------------------------
1 | @import url(http://fonts.googleapis.com/css?family=Monoton);
2 |
3 | .brush {
4 | width: 100px;
5 | height: 100px;
6 | background: #1B4370;
7 | margin: 15px auto;
8 | }
9 |
10 | .square {
11 | float: left;
12 | width: 10px;
13 | height: 10px;
14 | background: #E7E5DB;
15 | margin: 0;
16 | }
17 |
18 | h1 {
19 | font-family: Monoton;
20 | font-size: 48px;
21 | text-align: center;
22 | }
23 |
24 | .controls {
25 | text-align: center;
26 | }
27 |
28 | body {
29 | background-image: url('ps_neutral.png');
30 | }
31 |
--------------------------------------------------------------------------------
/04-11-ajax-and-apis/starter-code/04-open-weather-map/main.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | - Sign up for openweathermap.org and generate an API key.
4 | - User either $.ajax or $.get to pull weather current data .
5 | for Washington DC (hint: http://api.openweathermap.org/data/2.5/weather?q=...).
6 | - Print the temperature in console.
7 | - Bonus 1: add a form prompting user for the city and state.
8 | - Bonus 2: convert answer from kelvin to fahrenheit.
9 |
10 | */
11 |
12 | 'use strict';
13 | (function() {
14 | var weatherUrl = "http://api.openweathermap.org/data/2.5/weather?q=";
15 | var apiKey = "";
16 |
17 | });
18 | })();
19 |
--------------------------------------------------------------------------------
/03-21-functions-and-scope/solution-code/currency-converter/js/app.js:
--------------------------------------------------------------------------------
1 | var btcRate;
2 | var convertedBTC;
3 | $.getJSON('https://api.bitcoinaverage.com/ticker/USD/', function(data) {
4 | btcRate = data.last;
5 | });
6 |
7 | document.getElementById('convert').onclick = convert;
8 |
9 | function convert(){
10 | usdToConvert = document.getElementById('usd').value;
11 | //console.log(usdToConvert);
12 | btc = usdToBTC(usdToConvert);
13 | //console.log(btc);
14 | document.getElementById('btc').value = btc;
15 |
16 | }
17 |
18 | function usdToBTC(usd) {
19 | convertedBTC = usd / btcRate;
20 | return convertedBTC;
21 | }
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/solution-code/06-car-constructor-function-with-prototypes/app.js:
--------------------------------------------------------------------------------
1 | // Update the constructor function for our car to define the methods on prototypes
2 | // rather than on the individual instances themselves.
3 |
4 | function Car(model, color){
5 | this.model = model;
6 | this.color = color;
7 | }
8 |
9 | Car.prototype.fuel = 100;
10 |
11 | Car.prototype.drive = function(){
12 | this.fuel--;
13 | return 'Vroom!';
14 | }
15 |
16 | Car.prototype.refuel = function(){
17 | this.fuel = 100;
18 | }
19 |
20 | var celica = new Car("Celica","lemonchiffon")
21 | celica.drive()
22 | console.log(celica)
23 |
--------------------------------------------------------------------------------
/05-09-final-project/starter-code/readme.md:
--------------------------------------------------------------------------------
1 | # Project 4 Starter Code
2 |
3 | Here’s some starter code for you to use with your final projects.
4 | Add these files to your project folder and you’ve now got everything you need
5 | to get started, including a config file to input our class tokens (check Slack,
6 | everything’s pinned to the #general channel)
7 |
8 | While you’re testing locally, don’t forget to run `http-server` in the project folder to serve up these files. Here’s a link to our deployment tutorial
9 |
10 | Pixel Art!
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/solution-code/02-make-car-function/app.js:
--------------------------------------------------------------------------------
1 | // Create a makeCar function
2 | // ---
3 | // Define a function: `makeCar()` that takes two parameters (model, color) and
4 | // makes a new object literal for a car using those params, and returns that object.
5 |
6 | function makeCar(model, color){
7 | return {
8 | model: model,
9 | color: color,
10 | fuel: 100,
11 | drive: function() {
12 | this.fuel--;
13 | return 'Vroom!';
14 | },
15 | refuel: function() {
16 | this.fuel = 100;
17 | }
18 | }
19 | }
20 | var celica = makeCar("Toy-Yoda Celica", "limegreen");
21 | console.log(celica);
22 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/solution-code/pixart_js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Pixel Art!
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/03-14-data-types/data-types-exercise.md:
--------------------------------------------------------------------------------
1 | ## Data Types
2 |
3 | What is the return value of each of the below code snippets? Come up with an answer before testing them out in the console.
4 |
5 | ```js
6 | typeof( 15 );
7 | // Include your answer below each line using a comment, like this.
8 |
9 | typeof( 5.5 );
10 | typeof( NaN );
11 | typeof( "hello" );
12 | typeof( true )
13 | typeof( 1 != 2 );
14 |
15 | "hamburger" + "s";
16 | "hamburgers" - "s";
17 | "1" + "3"
18 | "1" - "3"
19 | "johnny" + 5;
20 | "johnny" - 5
21 | 99 * "luftbaloons";
22 | ```
23 |
24 | What's going on in the second half of the previous question? Are there any "rules" we can pull from those examples?
25 |
--------------------------------------------------------------------------------
/03-16-collections-and-loops/solution-code/verify-age.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | var age = 25
4 |
5 | if (age < 16) {
6 | console.log('You can go to school!')
7 | } else if (age >= 16 && age < 18) {
8 | console.log('You can drive!')
9 | } else if (age >= 18 && age < 21) {
10 | console.log('You can vote!')
11 | } else if (age >= 21 && age < 25) {
12 | console.log('You can drink alcohol!')
13 | } else if (age >= 25 && age < 35) {
14 | console.log('You can rent a car!')
15 | } else if (age >= 35 && age < 62) {
16 | console.log('You can run for president!')
17 | } else if (age >= 62) {
18 | console.log('You can collect social security!')
19 | } else {
20 | console.log('Please enter a correct age value')
21 | }
--------------------------------------------------------------------------------
/03-30-dom-and-jquery/starter-code/js_dom_exercise/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hello World
10 | 11 |Favorite Things
12 |-
13 |
- Dog bites 14 |
- Bee Stings 15 |
- Feeling Bad 16 |
Hello World
10 | 11 |Favorite Things
12 |-
13 |
- Dog bites 14 |
- Bee Stings 15 |
- Feeling Bad 16 |
Hello World
10 | 11 |Favorite Things
12 |-
13 |
- Dog bites 14 |
- Bee Stings 15 |
- Feeling Bad 16 |
11 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/04-27-closures-and-this/solution-code/make-a-person-module.js:
--------------------------------------------------------------------------------
1 |
2 | var johnny = (function(name, age) {
3 |
4 | var kids = [];
5 |
6 | return {
7 | getKids: function() {
8 | return kids;
9 | },
10 |
11 | haveAKid: function(kidName) {
12 | kids.push(kidName);
13 | },
14 |
15 | getName: function() {
16 | return name;
17 | },
18 |
19 | getAge: function() {
20 | return age;
21 | },
22 |
23 | celebrateBirthday: function() {
24 | age += 1;
25 | }
26 | };
27 | })('johnny', 32);
28 |
29 | johnny.celebrateBirthday();
30 |
31 | console.log(johnny.getAge()) // 33
32 |
33 | console.log(johnny.getKids()) // []
34 |
35 | johnny.haveAKid('judah');
36 |
37 | console.log(johnny.getKids()) // ['judah']
38 |
--------------------------------------------------------------------------------
/03-30-dom-and-jquery/solution-code/jquery_exercise/main.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | $(function() {
4 | var yourName = prompt('What is your name?');
5 |
6 | $('#name').html(yourName);
7 |
8 | var $thingList = $('#fav-list');
9 |
10 | var $button = $('#new-thing-button');
11 | // button.onclick = function(event) {
12 | $button.on('click', function(event) {
13 | event.preventDefault();
14 | MyApp.addToList($thingList);
15 | });
16 | });
17 |
18 | var MyApp = {};
19 |
20 | MyApp.addToList = function(list) {
21 | var $newLi = $('
12 |
14 |
15 |
16 |
17 |
23 |
24 |
27 | Thank You!
13 || Total | 19 |$0.00 | 20 |
|---|
10 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/04-11-ajax-and-apis/solution-code/02-movie-browser/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Movie Browser
11 | 12 | 16 | 17 | 20 | 21 | 22 |
10 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/04-27-closures-and-this/solution-code/make-a-person.js:
--------------------------------------------------------------------------------
1 |
2 | function makePerson(name, age) {
3 |
4 | var kids = [];
5 |
6 | return {
7 | getKids: function() {
8 | return kids;
9 | },
10 |
11 | haveAKid: function(kidName) {
12 | kids.push(kidName);
13 | },
14 |
15 | getName: function() {
16 | return name;
17 | },
18 |
19 | getAge: function() {
20 | return age;
21 | },
22 |
23 | celebrateBirthday: function() {
24 | age += 1;
25 | }
26 | };
27 | }
28 |
29 | var johnny = makePerson('johnny', 32);
30 |
31 | johnny.celebrateBirthday();
32 |
33 | console.log(johnny.getAge()) // 33
34 |
35 | console.log(johnny.getKids()) // []
36 |
37 | johnny.haveAKid('judah');
38 |
39 | console.log(johnny.getKids()) // ['judah']
40 |
--------------------------------------------------------------------------------
/03-30-dom-and-jquery/solution-code/js_to_jquery_codealong/main.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var $ = require('jquery');
4 |
5 | $(function() {
6 | var yourName = prompt('What is your name?');
7 |
8 | $('#name').html(yourName);
9 |
10 | var $thingList = $('#fav-list');
11 |
12 | var $button = $('#new-thing-button');
13 | // button.onclick = function(event) {
14 | $button.on('click', function(event) {
15 | event.preventDefault();
16 | MyApp.addToList($thingList);
17 | });
18 | });
19 |
20 | var MyApp = {};
21 |
22 | MyApp.addToList = function(list) {
23 | var $newLi = $('Movie Browser
11 | 12 | 16 | 17 | 20 | 21 | 22 |
11 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/04-11-ajax-and-apis/solution-code/04-open-weather-map/main.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | - Sign up for openweathermap.org and generate an API key.
4 | - User either $.ajax or $.get to pull weather current data .
5 | for Washington DC (hint: http://api.openweathermap.org/data/2.5/weather?q=...).
6 | - Print the temperature in console.
7 | - Bonus 1: add a form prompting user for the city and state.
8 | - Bonus 2: convert answer from kelvin to fahrenheit.
9 |
10 | */
11 |
12 | 'use strict';
13 | (function() {
14 | var weatherUrl = "http://api.openweathermap.org/data/2.5/weather?q=Washington,DC";
15 | var apiKey = "2490c4b3eae6bcf3343a6556a99ab9c2";
16 | var url = weatherUrl + "&appid=" + apiKey
17 | $.getJSON(url, function(response){
18 | console.log(response.main.temp)
19 | })
20 |
21 | })();
22 |
--------------------------------------------------------------------------------
/03-30-dom-and-jquery/starter-code/js_dom_exercise/main.js:
--------------------------------------------------------------------------------
1 | /* DOM Manipulation: Independent Practice
2 |
3 | To complete this excercise, you must meet the following requirements:
4 |
5 | - Change the value of the element with the name id to be whatever the user inputs when page first loads.
6 | - When the user clicks the "#new-thing-button" button, add whatever is in the input box to the "#fav-list" list.
7 | - Clear the input box when the user clicks the button.
8 | - Bonus: only add item if the input box is not blank (hint: check innerHTML property)
9 |
10 | */
11 |
12 |
13 | window.onload = function() {
14 | var your_name = prompt("What is your name?");
15 | var button;
16 | var thing_list;
17 |
18 | };
19 |
20 | var MyApp = {
21 | add_to_list: function(list) {
22 |
23 | }
24 | };
25 |
--------------------------------------------------------------------------------
/04-06-review/starter-code/cash-register/obfuscated/js/main.js:
--------------------------------------------------------------------------------
1 | eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1 e=0.3("o");e.n("a",a);1 8=0.3(\'8\');m a(h){h.q();1 5=0.3(\'f\');5=6(5.l).i(2);1 7=0.b("p");1 k=0.b("j");1 9=0.b("j");9.d=5;7.c(k);7.c(9);8.c(7);0.3(\'f\').l=\'\';4=6(0.3(\'4\').d.r(/\\$|,/g,\'\'));4=4+6(5);0.3(\'4\').d="$"+6(4).i(2)}',28,28,'document|var||getElementById|total|val|parseFloat|row|entries|valCell|submit|createElement|appendChild|innerHTML|form|newEntry||event|toFixed|td|cell|value|function|addEventListener|entry|tr|preventDefault|replace'.split('|'),0,{}))
2 |
3 |
--------------------------------------------------------------------------------
/04-11-ajax-and-apis/solution-code/02-movie-browser/readme.md:
--------------------------------------------------------------------------------
1 | # Movie Browser
2 |
3 | Use the [Open Movie Database API](http://www.omdbapi.com/) to build a single-page movie browser app.
4 |
5 | ## Requirements
6 |
7 | 1. The `"#movie-select"` should be hidden by default.
8 |
9 | 2. When the user may submits a search for a movie keyword...
10 | - the `"#movie-select"` field should be un-hidden,
11 | - it should be populated with all search results,
12 | - and the first select option should read "Movies matching `keyword`…".
13 |
14 | 3. Whenever the user selects a title from the `#movie-select` field (HINT: listen for a `"change"` event), the app should populate the `"#movie-detail"` div with that movie's title and poster image.
15 |
16 | ## Take a look:
17 |
18 | http://ga-dc.github.io/movie-browser
19 |
--------------------------------------------------------------------------------
/04-11-ajax-and-apis/starter-code/02-movie-browser/readme.md:
--------------------------------------------------------------------------------
1 | # Movie Browser
2 |
3 | Use the [Open Movie Database API](http://www.omdbapi.com/) to build a single-page movie browser app.
4 |
5 | ## Requirements
6 |
7 | 1. The `"#movie-select"` should be hidden by default.
8 |
9 | 2. When the user may submits a search for a movie keyword...
10 | - the `"#movie-select"` field should be un-hidden,
11 | - it should be populated with all search results,
12 | - and the first select option should read "Movies matching `keyword`…".
13 |
14 | 3. Whenever the user selects a title from the `#movie-select` field (HINT: listen for a `"change"` event), the app should populate the `"#movie-detail"` div with that movie's title and poster image.
15 |
16 | ## Take a look:
17 |
18 | http://ga-dc.github.io/movie-browser
19 |
--------------------------------------------------------------------------------
/03-30-dom-and-jquery/solution-code/jquery_exercise/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
14 |
15 |
16 |
17 |
23 |
24 |
27 | Thank You!
13 || Total | 19 |$0.00 | 20 |
|---|
Hello World
9 | 10 |Favorite Things
11 |-
12 |
- Dog bites 13 |
- Bee Stings 14 |
- Feeling Bad 15 |
Hello World
9 | 10 |Favorite Things
11 |-
12 |
- Dog bites 13 |
- Bee Stings 14 |
- Feeling Bad 15 |
Hello World
9 | 10 |Favorite Things
11 |-
12 |
- Dog bites 13 |
- Bee Stings 14 |
- Feeling Bad 15 |
Hello World
9 | 10 |Favorite Things
11 |-
12 |
- Dog bites 13 |
- Bee Stings 14 |
- Feeling Bad 15 |
34 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/solution-code/07-oop-monkey-js/readme.md:
--------------------------------------------------------------------------------
1 | # Monkies!!
2 |
3 | Create a `Monkey` constructor in `lib/monkey.js`, which has the following attributes:
4 | * name - (a string)
5 | * species - (a string)
6 | * foodsEaten - (an array)
7 |
8 | And the following methods:
9 | * eat(food) - adds the food (a string) to the list of foods eaten
10 | * introduce() - introduces self, with name, species, and what it's eaten.
11 |
12 | ## Setup
13 |
14 | Install dependencies:
15 | ```bash
16 | $ npm install -g jasmine-node
17 | $ npm install
18 | ```
19 |
20 | ## Goal
21 |
22 | Run tests using `jasmine-node spec`. Write code in your Monkey constructor to make the tests pass.
23 |
24 | Make sure to use the Monkey prototype so that you're not creating multiple copies of the functions for your monkies!
25 |
26 | ## Bonus
27 |
28 | Uncomment the bonus tests in `spec/monkey_spec` and make them pass.
29 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/starter-code/07-oop-monkey-js/readme.md:
--------------------------------------------------------------------------------
1 | # Monkies!!
2 |
3 | Create a `Monkey` constructor in `lib/monkey.js`, which has the following attributes:
4 | * name - (a string)
5 | * species - (a string)
6 | * foodsEaten - (an array)
7 |
8 | And the following methods:
9 | * eat(food) - adds the food (a string) to the list of foods eaten
10 | * introduce() - introduces self, with name, species, and what it's eaten.
11 |
12 | ## Setup
13 |
14 | Install dependencies:
15 | ```bash
16 | $ npm install -g jasmine-node
17 | $ npm install
18 | ```
19 |
20 | ## Goal
21 |
22 | Run tests using `jasmine-node spec`. Write code in your Monkey constructor to make the tests pass.
23 |
24 | Make sure to use the Monkey prototype so that you're not creating multiple copies of the functions for your monkies!
25 |
26 | ## Bonus
27 |
28 | Uncomment the bonus tests in `spec/monkey_spec` and make them pass.
29 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/solution-code/templating_codealong/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hello World
9 | 10 |Favorite Things
11 |-
12 |
Currency Converter
22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/03-21-functions-and-scope/starter-code/currency-converter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Currency Converter
22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/04-06-review/readme.md:
--------------------------------------------------------------------------------
1 | #  Review (3:00)
2 |
3 | ## We've come a looooonnggg way
4 |
5 | ### Do you sometimes feel like this?
6 |
7 | 
8 |
9 | ### JavaScript kicking your butt?
10 |
11 | 
12 |
13 | ### You've tried everything
14 |
15 | 
16 |
17 | ### But you still feel like this
18 |
19 | 
20 |
21 | ### Then you're all like "screw javascript, I'm going back to ruby, ugh"
22 |
23 | 
24 |
25 | ### Everyone goes through this! It's an indication that growth is happening!
26 |
27 | 
28 |
29 |
30 | ## Variables
31 |
32 | ```javascript
33 | var foo = 'bar';
34 | var beep = 1;
35 | ```
36 |
37 | ##
--------------------------------------------------------------------------------
/04-11-ajax-and-apis/solution-code/02-movie-browser/js/movie_browser.js:
--------------------------------------------------------------------------------
1 | // API Docs at:
2 | // http://www.omdbapi.com
3 |
4 | var $dropdown = $("#movie-select");
5 | var $form = $("#search")
6 | var $input = $("#movie-search")
7 | var $detail = $("#movie-detail")
8 |
9 | $dropdown.hide()
10 | $form.on("submit", function(e){
11 | e.preventDefault()
12 | var url = "http://www.omdbapi.com/?s=" + $input.val()
13 | $.get(url, function(response){
14 | console.log(response)
15 | buildDropdown(response.Search)
16 | })
17 | })
18 |
19 | $dropdown.on("change", function(e){
20 | var $selected = $(this).find(":selected");
21 | var id = $selected.attr("id")
22 | var url = "http://www.omdbapi.com/?i=" + id
23 | $.get(url, function(response){
24 | $detail.html(""+response.Title+"
") 25 | $detail.append("Do It
9 | 10 |Todo List
11 |Do It
9 | 10 |Todo List
11 |
11 | 
12 |
14 |
15 | Bank of GA
13 |
16 |
22 |
23 | Checking
17 |$0
18 |
19 |
20 |
21 |
24 |
30 | Savings
25 |$0
26 |
27 |
28 |
29 |
16 |
25 |
26 |
17 |
24 | Want to see what your neighbors are Instagramming?
18 | 23 |
27 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/04-18-advanced-apis/starter-code/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Here are the images in your neighborhood:
28 | 29 |
16 |
25 |
26 |
17 |
24 | Want to see what your neighbors are Instagramming?
18 | 23 |
27 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/solution-code/08-prototypal-inheritance/app.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////
2 | // Animal (Parent) Class
3 | ////////////////////////////////
4 | function Animal( name ){
5 | this.name = name;
6 | }
7 |
8 | Animal.prototype.kingdom = "Animalia";
9 | Animal.prototype.breathe = function() {console.log("Inhale... exhale...")};
10 |
11 |
12 | ////////////////////////////////
13 | // HELLO THIS IS DOG
14 | ////////////////////////////////
15 | function Dog(name, breed){
16 | this.name = name;
17 | this.breed = breed;
18 | }
19 |
20 | // Important! Set up the link in the prototype chain connecting Dogs to Animals
21 | Dog.prototype = new Animal();
22 |
23 | // Add any methods / properties shared by all dogs.
24 | Dog.prototype.bark = function(){ console.log("Woof")};
25 | Dog.prototype.species = "Canis canis"
26 |
27 | ////////////////////////////////
28 | // Testing our dawgs
29 | ////////////////////////////////
30 | var spot = new Dog("Spot", "Beagle");
31 |
32 | // from Animal prototype
33 | spot.kingdom;
34 | spot.breathe();
35 |
36 | // from Dog prototype
37 | spot.bark();
38 | spot.species;
39 |
40 | // from Dog properties
41 | spot.name;
42 | spot.breed;
43 |
--------------------------------------------------------------------------------
/05-02-prototypal-inheritance/starter-code/08-prototypal-inheritance/app.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////
2 | // Animal (Parent) Class
3 | ////////////////////////////////
4 | function Animal( name ){
5 | this.name = name;
6 | }
7 |
8 | Animal.prototype.kingdom = "Animalia";
9 | Animal.prototype.breathe = function() {console.log("Inhale... exhale...")};
10 |
11 |
12 | ////////////////////////////////
13 | // HELLO THIS IS DOG
14 | ////////////////////////////////
15 | function Dog(name, breed){
16 | this.name = name;
17 | this.breed = breed;
18 | }
19 |
20 | // Important! Set up the link in the prototype chain connecting Dogs to Animals
21 | Dog.prototype = new Animal();
22 |
23 | // Add any methods / properties shared by all dogs.
24 | Dog.prototype.bark = function(){ console.log("Woof")};
25 | Dog.prototype.species = "Canis canis"
26 |
27 | ////////////////////////////////
28 | // Testing our dawgs
29 | ////////////////////////////////
30 | var spot = new Dog("Spot", "Beagle");
31 |
32 | // from Animal prototype
33 | spot.kingdom;
34 | spot.breathe();
35 |
36 | // from Dog prototype
37 | spot.bark();
38 | spot.species;
39 |
40 | // from Dog properties
41 | spot.name;
42 | spot.breed;
43 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/solution-code/pixart_js/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 GA_DC Campus
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/starter-code/pixart_js/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 GA_DC Campus
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/04-13-async-js-and-callbacks/solution-code/functions-callbacks-exercise/main.js:
--------------------------------------------------------------------------------
1 |
2 | // This function takes one parameter - predicate.
3 | // Predicate should be a function
4 | function countWhereTrue (predicate) {
5 | return function(items) {
6 | var count = 0;
7 | for (var i = 0; i < items.length; i++) {
8 | if (predicate(items[i])) {
9 | count++;
10 | }
11 | }
12 | return count;
13 | };
14 | }
15 |
16 | // This function should return true or false depending on if the number
17 | // passed to it is odd or not
18 | function isOdd(number) {
19 | return number % 2 !== 0;
20 | }
21 |
22 | /* Once you've filled in the two function definitions above, the line below should package up 'makeCountWhereTrue()' and 'isOdd()' into a single function that accepts an array of items as a parameter, loops through it and returns a count of how many of those items are odd numbers. This new function is being assigned to the variable 'countTheOdds'. */
23 | var countTheOdds = countWhereTrue(isOdd);
24 |
25 | /* The final line below calls our new 'countTheOdds()' function and passes in an array of numbers. Once your code is working, the line below should return the number 4. */
26 |
27 | console.log(countTheOdds([1, 2, 3, 4, 5, 6, 7]));
28 |
--------------------------------------------------------------------------------
/04-13-async-js-and-callbacks/starter-code/functions-callbacks-exercise/main.js:
--------------------------------------------------------------------------------
1 |
2 | function countWhereTrue (predicate) {
3 | // return a function that takes one parameter (an array)
4 | // Initialize a counter
5 | // For every item in the array
6 | // pass the item to the given predicate function
7 | // if the result of the prediciate function is true
8 | // increment the counter by 1
9 | // return the count
10 | }
11 |
12 | // This function should return true or false depending on if the number
13 | // passed to it is odd or not
14 | function isOdd(number) {
15 |
16 | }
17 |
18 | // Once you've filled in the two function definitions above, the line below
19 | // should package up 'countWhereTrue()' and 'isOdd()' into a single function that
20 | // accepts an array of items as a parameter, loops through it and returns a count
21 | // of how many of those items are odd numbers.
22 | // This new function is being assigned to the variable 'countTheOdds'.
23 | var countTheOdds = countWhereTrue(isOdd);
24 |
25 | // The final line below calls our new 'countTheOdds()' function and passes in an
26 | // array of numbers. Once your code is working, the line below should return
27 | // the number 4
28 | console.log( countTheOdds([1, 2, 3, 4, 5, 6, 7]) );
29 |
--------------------------------------------------------------------------------
/04-06-review/starter-code/cash-register/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #EEE;
3 | font-family: sans-serif;
4 | font-size: 20px;
5 | margin: 3em;
6 | padding: 0;
7 | }
8 |
9 | #register {
10 | width: 20em;
11 | margin: auto;
12 | }
13 |
14 | #ticket {
15 | background: white;
16 | margin: 0 1em;
17 | padding: 1em;
18 | box-shadow: 0 0 5px rgba(0,0,0,.25);
19 | }
20 | #ticket h1 {
21 | text-align: center;
22 | }
23 | #ticket table {
24 | font-family: monospace;
25 | width: 100%;
26 | border-collapse: collapse;
27 | }
28 | #ticket td, #ticket th {
29 | padding: 5px;
30 | }
31 | #ticket th {
32 | text-align: left;
33 | }
34 | #ticket td, #ticket #total {
35 | text-align: right;
36 | }
37 | #ticket tfoot th {
38 | border-top: 1px solid black;
39 | }
40 |
41 | #entry {
42 | background: #333;
43 | padding: 12px;
44 | border-radius: 10px;
45 | box-shadow: 0 0 5px rgba(0,0,0,.25);
46 | }
47 | #entry input {
48 | width: 100%;
49 | padding: 10px;
50 | border: 1px solid black;
51 | text-align: right;
52 | font-family: sans-serif;
53 | font-size: 20px;
54 | box-shadow: inset 0 0 3px rgba(0,0,0,.5);
55 | -webkit-box-sizing: border-box;
56 | -moz-box-sizing: border-box;
57 | box-sizing: border-box;
58 | }
59 | #entry input:focus {
60 | outline: none;
61 | border-color: rgba(255,255,255,.75);
62 | }
--------------------------------------------------------------------------------
/04-06-review/starter-code/cash-register/obfuscated/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #EEE;
3 | font-family: sans-serif;
4 | font-size: 20px;
5 | margin: 3em;
6 | padding: 0;
7 | }
8 |
9 | #register {
10 | width: 20em;
11 | margin: auto;
12 | }
13 |
14 | #ticket {
15 | background: white;
16 | margin: 0 1em;
17 | padding: 1em;
18 | box-shadow: 0 0 5px rgba(0,0,0,.25);
19 | }
20 | #ticket h1 {
21 | text-align: center;
22 | }
23 | #ticket table {
24 | font-family: monospace;
25 | width: 100%;
26 | border-collapse: collapse;
27 | }
28 | #ticket td, #ticket th {
29 | padding: 5px;
30 | }
31 | #ticket th {
32 | text-align: left;
33 | }
34 | #ticket td, #ticket #total {
35 | text-align: right;
36 | }
37 | #ticket tfoot th {
38 | border-top: 1px solid black;
39 | }
40 |
41 | #entry {
42 | background: #333;
43 | padding: 12px;
44 | border-radius: 10px;
45 | box-shadow: 0 0 5px rgba(0,0,0,.25);
46 | }
47 | #entry input {
48 | width: 100%;
49 | padding: 10px;
50 | border: 1px solid black;
51 | text-align: right;
52 | font-family: sans-serif;
53 | font-size: 20px;
54 | box-shadow: inset 0 0 3px rgba(0,0,0,.5);
55 | -webkit-box-sizing: border-box;
56 | -moz-box-sizing: border-box;
57 | box-sizing: border-box;
58 | }
59 | #entry input:focus {
60 | outline: none;
61 | border-color: rgba(255,255,255,.75);
62 | }
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/starter-code/pixart_js/pixart.js:
--------------------------------------------------------------------------------
1 | // Step 1
2 | //When I click the "Set Color" button, it should change the color of the "brush" box to the color I specify in the input field. (Hint: You will need to use event.preventDefault() somewhere in your code.)
3 |
4 | // Step 2
5 | //The same thing should happen when I press the enter key from inside the input field
6 |
7 | // Step 3
8 | //Create 20 divs of the "square" class and append them to the body
9 | //Hint: use .append()
10 |
11 | // Step 4
12 | //Add functionality so that when I click on each "square", it changes the color of that individual square to "green"
13 | //Hint: either add the event listener while creating the squares, or listen for events on the body element
14 |
15 | // Step 5
16 | //Modify your code so that when I click on each "square", it changes to the color I set using my input instead of "green" every time.
17 |
18 | // Step 6
19 | //Modify the CSS so that the "square" class has a height and width of 10px and a margin of 0.
20 | //Modify your code so that you are creating 8000 divs instead of 20.
21 | //Change the event that changes your box colors from 'click' to 'mouseover'
22 | //Paint a picture!
23 |
24 | // Bonus
25 | //Add a color swatch. You should have 3 boxes with the most recent 3 colors used. When you click on each of those boxes, it should set the current brush color back to that color.
26 |
--------------------------------------------------------------------------------
/03-23-project-1/starter_code/scripts/slackbot.js:
--------------------------------------------------------------------------------
1 | // Description:
2 | //
3 | //
4 | // Dependencies:
5 | // None
6 | //
7 | // Configuration:
8 | // None
9 | //
10 | // Commands:
11 | //
12 |
13 | module.exports = function(robot) {
14 | // YOUR CODE HERE
15 | // Example
16 | robot.hear(/javascript/i, function(msg) {
17 | return msg.send("I love JavaScript!");
18 | });
19 | }
20 |
21 | /************************************
22 |
23 | EXAMPLES OF THE KEY HUBOT FUNCTIONS
24 |
25 | ************************************/
26 |
27 | /* Variables for random example */
28 |
29 | var squirrels;
30 | squirrels = ["http://img.skitch.com/20100714-d6q52xajfh4cimxr3888yb77ru.jpg", "https://img.skitch.com/20111026-r2wsngtu4jftwxmsytdke6arwd.png", "http://cl.ly/1i0s1r3t2s2G3P1N3t3M/Screen_Shot_2011-10-27_at_9.36.45_AM.png", "http://shipitsquirrel.github.com/images/squirrel.png"];
31 |
32 | module.exports = function(robot) {
33 | /* Basic example of respond / send. If the user enters hi or hello the bot responds "Howdy!" */
34 | return robot.respond(/hi|hello/i, function(msg) {
35 | return msg.send("Howdy!");
36 | });
37 |
38 | /* Random Example
39 | If a user enters 'ship it' we return a random squirrel, which is popular for symbolizing shipping something with engineers */
40 | return robot.hear(/ship it/i, function(msg) {
41 | return msg.send(msg.random(squirrels));
42 | });
43 | };
44 |
--------------------------------------------------------------------------------
/03-21-functions-and-scope/starter-code/dice/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Here are the images in your neighborhood:
28 | 29 |
23 |
24 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/03-21-functions-and-scope/solution-code/dice/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dice Roller
25 |
23 |
24 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/05-09-final-project/starter-code/config.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Dice Roller
25 |Configure your APP_ID, APP_KEY and APP_HOST right here! 9 |
15 |16 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /03-30-dom-and-jquery/starter-code/jquery_exercise/main.js: -------------------------------------------------------------------------------- 1 | /*Create a Checklist: Independent Practice 2 | 3 | You'll add the ability to complete tasks in your favorite things list. Your program must complete the following rules: 4 | 5 | - Through jQuery, add a "complete task" link at the end of each to-do item (i.e. each "favorite thing"). 6 | - When clicked, the link will cross out the current item (hint: add a class to the list that sets the text-decoration to strikeout). 7 | - Each new item added by the user needs to also have the "complete task" link at the end. 8 | - Bonus: when user completes an item, remove that item from the current list and add it to a completed list below. Do not show this list unless the there are completed items. 9 | - Bonus 2: add the ability to restore items from the completed list to the first list. 10 | 11 | */ 12 | 13 | 'use strict'; 14 | 15 | $(function() { 16 | var yourName = prompt('What is your name?'); 17 | 18 | $('#name').html(yourName); 19 | 20 | var $thingList = $('#fav-list'); 21 | 22 | var $button = $('#new-thing-button'); 23 | // button.onclick = function(event) { 24 | $button.on('click', function(event) { 25 | event.preventDefault(); 26 | MyApp.addToList($thingList); 27 | }); 28 | }); 29 | 30 | var MyApp = {}; 31 | 32 | MyApp.addToList = function(list) { 33 | var $newLi = $('
Configure your APP_ID, APP_KEY and APP_HOST right here! 9 |
15 |16 |
17 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/05-04-CRUD/starter-code/config.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Configure your APP_ID, APP_KEY and APP_HOST right here! 9 |
15 |16 |
17 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | #  JavaScript Development
2 |
3 | ## People
4 |
5 | - Producer
6 | - Tim Foley
7 | - [tim.foley@ga.co](tim.foley@ga.co)
8 | - 202-748-3694
9 | - Instructors
10 | - Johnny Austin
11 | - [johnny@isl.co](johnny@isl.co)
12 | - Office hours:
13 | - Thursdays 6:00pm -8:00pm [ISL Office](https://isl.co/contact/)
14 | - Jesse Shawl
15 | - [jesse@ga.co](jesse@ga.co)
16 | - office hours:
17 | - Sundays 10:00am - 12:00pm @ GA
18 | - TA
19 | - John Master
20 | - [john.master@generalassemb.ly](john.master@generalassemb.ly)
21 | - Office hours:
22 | - Monday 5:30 - 6:30 (General Assembly)
23 | - Wednesday 5:30 - 6:30 (General Assembly)
24 |
25 | ## Course information
26 |
27 | Class will meet on the 8th floor in classroom 3 from 6:30 - 9:30pm - https://goo.gl/maps/PwyY2
28 |
29 | To get up to the 8th floor, show the attached Class Pass at the Security Desk downstairs. You will need to show this on your phone or printed out every time.
30 | Once you're upstairs, tell the folks at the front desk you're here for your first day of Javascript and they'll point you to your classroom.
31 |
32 | ### What to Bring
33 |
34 | A. Your laptop (and charger with your name on it!)
35 |
36 | B. Snacks in case you get hungry
37 |
38 | C. [Class Pass](./assets/class-pass.png) printed out or on your phone
39 |
40 | ## Schedule
41 |
42 | [Google Calendar](https://calendar.google.com/calendar/embed?src=generalassemb.ly_2bpe0sg92jg3otj03epjk03foc%40group.calendar.google.com&ctz=America/New_York)
43 |
--------------------------------------------------------------------------------
/03-14-data-types/lab.md:
--------------------------------------------------------------------------------
1 | ## Data Collections
2 |
3 | ### Arrays
4 |
5 | Javascript provides us with a number of native methods that allow us to interact with arrays. Find methods that do each of the following and provide an example...
6 | * Add an element to the back of an array.
7 | * Remove an element from the back of an array.
8 | * Add an element to the front of an array.
9 | * Remove an element from the front of an array.
10 | * Concatenates all the elements in an array into a string.
11 | * Separates the characters of a string into an array.
12 |
13 | ```js
14 | // Your answers go here.
15 | ```
16 |
17 | What will the contents of the below arrays be after the code samples are executed? Come up with an answer yourself before testing it out in the console.
18 | > **HINT:** You might find it helpful to draw the arrays out as you run each line of code.
19 |
20 | ```js
21 | var numbers = [ 2, 4, 6, 8 ];
22 | numbers.pop();
23 | numbers.push( 10 );
24 | numbers.unshift( 3 );
25 | ```
26 |
27 | ```
28 | Your answer goes here.
29 | ```
30 |
31 | What is the return value of the below code sample? Come up with an answer yourself before testing it out in the console.
32 |
33 | ```js
34 | var morse = [ "dot", "pause", "dot" ];
35 | var moreMorse = morse.join( " dash " );
36 | moreMorse.split( " " );
37 | ```
38 |
39 | ```
40 | Your answer goes here.
41 | ```
42 |
43 | What will the contents of the below array be after the below code sample is executed? Come up with an answer yourself before testing it out in the console.
44 |
45 | ```js
46 | var bands = [];
47 | var beatles = [ "Paul", "John", "George", "Pete" ];
48 | var stones = [ "Brian", "Mick", "Keith", "Ronnie", "Charlie" ];
49 | bands.push( beatles );
50 | bands.unshift( stones );
51 | bands[ bands.length - 1 ].pop();
52 | bands[0].shift();
53 | bands[1][3] = "Ringo";
54 | ```
55 |
56 | ```
57 | Your answer goes here.
58 | ```
59 |
--------------------------------------------------------------------------------
/04-18-advanced-apis/solution-code/app.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | // get access token from hash/fragment
4 | var uriHash = window.location.hash;
5 |
6 | if (uriHash.length > 0) {
7 | var accessToken = uriHash.replace('#access_token=', '');
8 | getImages(accessToken);
9 | } else {
10 | // if not yet redirected hide results view
11 | $('.image-results-view').hide();
12 | }
13 |
14 | function getImages(accessToken) {
15 | // if redirected hide initial view
16 | $('.sign-in-view').hide();
17 |
18 | // use the navigator given to us by the window.navigator object to find the user's location
19 | getCurrentLocation(function(position) {
20 | var lat = position.coords.latitude;
21 | var lng = position.coords.longitude;
22 |
23 | // configure instagram endpoint with accessToken and user's location data
24 | var instagramEndpoint = 'https://api.instagram.com/v1/media/search?lat=' + lat + '&lng=' + lng + '&access_token=' + accessToken
25 |
26 | // call the instagram with configured URI
27 | $.ajax({
28 | url: instagramEndpoint,
29 | method: 'GET',
30 | dataType: 'jsonp',
31 | success: handleResponseSuccess
32 | });
33 | });
34 |
35 | }
36 |
37 | function handleResponseSuccess(response) {
38 | var allData = response.data;
39 |
40 | // iterate through each piece of data
41 | allData.forEach(function(data) {
42 | var imageUrl = 'url(' + data.images.standard_resolution.url + ')';
43 |
44 | // create element
45 | var element = $('').css({'background-image': imageUrl}).addClass('image');
46 |
47 | // append element to .images node
48 | $('.images').append(element);
49 | });
50 | }
51 |
52 | function getCurrentLocation(onLocation) {
53 | if (navigator.geolocation) {
54 | navigator.geolocation.getCurrentPosition(onLocation);
55 | } else {
56 | console.error("Geolocation is not supported by this browser.");
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/04-06-review/starter-code/atm/readme.md:
--------------------------------------------------------------------------------
1 | #ATM application
2 |
3 | We 're going to build an application to keep track of the checking and savings balances.
4 |
5 | There is also a vanilla Javascript solution branch that was coded in class.
6 |
7 | ## USE jQUERY
8 |
9 | ###User Stories
10 | - As a user, I want to deposit money into one of the bank accounts
11 | - As a user, I want to withdraw money from one of the bank accounts
12 | - Make sure the balance in an account can't go negative. If a user tries to withdraw more money than exists in the account, ignore the transaction.
13 | - As a user, I want overdraft protection
14 | - What happens when the user wants to withdraw more money from the checking account than is in the account?
15 | - If a withdrawal can be covered by the balances in both accounts, take the balance of the account withdrawn from down to $0 and take the rest of the withdrawal from the other account.
16 | - If the withdrawal amount is more than the combined account balance, ignore it.
17 | - As a user, I want the color of my back account to reflect it's balance (there's a CSS class called .zero already written for this!)
18 | - Are there ways to refactor your code to make it DRYer or more Object-Oriented?
19 |
20 | ###Tips
21 | * Tackle making your accounts work individually first
22 | * Then tackle them working together with overdraft protection
23 | * Only start working with the DOM after you have the logic down
24 |
25 | ###Resources
26 | * [What is window.onload for?](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload)
27 | * [Adding Event Listeners so things happen when you click](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener)
28 | * [Adding or removing a CSS class using JS](https://developer.mozilla.org/en-US/docs/Web/API/Element.classList)
29 | * [Changing HTML with JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML)
30 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/solution-code/pixart_js/pixart.js:
--------------------------------------------------------------------------------
1 | var $button = $("#set-color");
2 | var $brush = $(".brush");
3 | var $input = $("#color-field");
4 | var $form = $("#form");
5 | var $body = $("body");
6 |
7 | // Step 1
8 | //When I click the "Set Color" button, it should change the color of the "brush" box to the color I specify in the input field. (Hint: You will need to use event.preventDefault() somewhere in your code.)
9 | $form.on("submit", function(e){
10 | e.preventDefault();
11 | var color = $input.val();
12 | $brush.css('background', color);
13 | })
14 |
15 | // Step 2
16 | //The same thing should happen when I press the enter key from inside the input field
17 |
18 | // Step 3
19 | //Create 20 divs of the "square" class and append them to the body
20 | //Hint: use .append()
21 |
22 | for( var i = 0; i < 8000; i++){
23 | $body.append("");
24 | }
25 |
26 | // Step 4
27 | //Add functionality so that when I click on each "square", it changes the color of that individual square to "green"
28 | //Hint: either add the event listener while creating the squares, or listen for events on the body element
29 |
30 | $(".square").on("mouseover", function( event ){
31 | var $square = $(event.target);
32 | $square.css('background',$input.val())
33 | })
34 |
35 | // Step 5
36 | //Modify your code so that when I click on each "square", it changes to the color I set using my input instead of "green" every time.
37 |
38 | // Step 6
39 | //Modify the CSS so that the "square" class has a height and width of 10px and a margin of 0.
40 | //Modify your code so that you are creating 8000 divs instead of 20.
41 | //Change the event that changes your box colors from 'click' to 'mouseover'
42 | //Paint a picture!
43 |
44 | // Bonus
45 | //Add a color swatch. You should have 3 boxes with the most recent 3 colors used. When you click on each of those boxes, it should set the current brush color back to that color.
46 |
--------------------------------------------------------------------------------
/04-04-dom-and-jquery-continued/solution-code/pixart_js/README.md:
--------------------------------------------------------------------------------
1 | #Pixart
2 |
3 | Use the starter code and commit each step of the exercise.
4 |
5 | - Fork and clone this repo.
6 | - Checkout a new branch called '**YOUR-NAME**-solution'
7 | - Work in small steps and commit frequently.
8 | - When you're finished, push your solution branch to your fork (`git push origin
46 |
72 |
73 |
74 |
75 |
47 |
60 |
61 |
48 |
59 | Post a message for all fans of Beyonce AND Beyonce to see!
49 |
50 |
57 |
58 |
62 |
70 |
71 |
63 |
69 | Message Board
64 |
65 |
67 |
68 |