Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                // Arrays can do everything functions can do and everything objects can do
// functions can do everything objects can do 
// everything in JS is an object

// Constructor Function (review)
// The old way 


// Breakout
// create a pet constructor with a name location and phrase as attributes and a speak method that returns: name says phrase 
// the create a baby pet that has the ability to speak and play the baby pet should also have a toy. The play method should return name plays with their toy
function Pet(attributes){
  this.name = attributes.name;
  this.location = attributes.location;
  this.phrase = attributes.phrase;
}

Pet.prototype.speak = function(){
  return `${this.name} says ${this.phrase}`;
}

// conver to class syntax 

class Pet{
  constructor(attributes){
    this.name = attributes.name;
    this.location = attributes.location;
    this.phrase = attributes.phrase;
  } // method go here
  speak(){
    return `${this.name} says ${this.phrase}`;
  }
}

// Creating A Child (review)
// the old way 
function Child(childAttributes){
  Pet.call(this, childAttributes) // binding this to parent 
  this.isChild = childAttributes.isChild; // this will be for any special attributes to the child 
}

Child.prototype = Object.create(Pet.prototype);


// // Creating a Child using class syntax 
// // super and extends do what .call and .create did 
class Child extends Pet{
  constructor(attributes){
    super(attributes)
    // any special attributes for the child go here 
  }// any special methods for the child go here 
}



const petOne = new Pet({
  name: 'Ada',
  location: 'Canada',
  phrase: 'wooof wooof'
})

const petTwo = new Child({
  name: 'Noa',
  location: 'Canada',
  phrase: 'bark bark'
})

console.log(petOne.speak());
console.log(petTwo.speak());

// Classes 
// classes are not hoisted - that means if we are putting our information above a class we have referenced it will not work 
// they use strict - it prevents window binding, forces us to write cleaner code with errors if we do not 
// Methods are a special syntax 
// A constructor function is visible 

// Child Classes 
// extends links up the dunder proto - it tells us where we came from 
// extends tells super what to super to 
// extends + super do what object.create and parent.call did 

class Parent{
  constructor(attributes){
    this.name = attributes.name;
    this.location = attributes.location;
    this.work = attributes.work;
  }// write methods here
  job(){
    return `${this.name} is a ${this.work}`;
  }
}

class Child extends Parent{
  constructor(attributes){
    super(attributes) // this replaces Parent.call
    // special attributes for the child 
    this.major = attributes.major;
  } // special methods for the child 
  study(){
    return `${this.name} is studying ${this.major}`;
  }
}

class GrandChild extends Child{
  constructor(other){
    super(other)// this replaces Parent.call
    // any special attributes for the grandchild go here
    this.toy = other.toy
  } // any special methods for the grandchild go here
  play(){
    return `${this.name} plays with ${this.toy}`;
  }
}

class Pet extends GrandChild{
  constructor(attributes){
    super(attributes) // this replaces .call
    // any special attributes for pet 
    this.food = attributes.food
  } // any special methods for pet go here 
  eat(){
    return `${this.name} eats ${this.food}`;
  }
}

const mom = new Parent({
  name: 'mom',
  location: 'USA',
  work: 'Computer Scientist'
});

const daughter = new Child({
  name: 'Sara',
  location: 'USA',
  work: 'student',
  major: 'Bio Chemistry'
});

const grandBaby = new GrandChild({
  name: 'Jake',
  location: 'USA',
  work: 'a baby',
  major: 'first words',
  toy: 'raddle'
});

const fish = new Pet({
  name: 'Goldie',
  location: 'fish bowl',
  work: 'swimming like its my job',
  major: 'bubble formations',
  toy: 'sunken ship',
  food: 'fish food'
});

console.log(mom.job());
console.log(daughter.job());
console.log(daughter.study());
console.log(grandBaby.job());
console.log(grandBaby.study());
console.log(grandBaby.play());
console.log(fish.play());
console.log(fish.job());
console.log(fish.study());
console.log(fish.eat());

// REVIEW 
// placeholder values function() inside of these paraenthesis are called parameters
// arguments are the values that get passed in 

// function add(num1, num2){ // the parameters are num1 and num2 they hold the place for the numers that will be passed in 
// return num1 + num2
//}

// add(2, 3); // 2 and 3 are the arugments 

// if I wanted to see this result in the conole I would need to wrap a console.log - which is a method - around the invocation 

// object {
// key / value pairs (these are called properties)

// methods - these are fuctions that belong to an object 
//}

// Array []
// think of an array of information! 
// Order matters in an array 
// the computer assigns an index to every item in the array - that index starts at zero 

// Callbacks + Higher Order Functions 
// callbacks are passed into higher order functions 
// callbacks are given and higher order functions receive 

//  function maths(num1, num2, cb){
//    return cb(num1, num2);
//    //add(2, 3);
//    // subtract(4, 2)
// }

// const add = (num1, num2) =>{
//   return num1 + num2;
// }

// const subtract = (num1, num2) =>{
//   return num1 - num2;
// }
// maths(2, 3, add)
// maths(4, 2, subtract)

// Skeleton of class syntax 

// class Parent{
//   constructor(param){
//    // assign attributes here
//   }
//   // methods go here
// }

// // child 

// class Child extends Parent{
//   constructor(param){
//     super(param);
//     // assign any special child attributes here
//   }
//   // add any specific child methods here
// }

// // create objects here

// const something = new Parent({
//   // key value pairs 
// })

// const somethingElse = new Child({
//   // key value pairs that are inherted from parent 
//   // key value pairs that are special to the child 
// })

// invoke methods here 




// Prototype 
// function Parent(attributes){
//   // assign values here
// }

// Parent.prototype.methodName = function(){
//   return ;
// }

// function Child(childAttributes){
//   Parent.call(this, childAttributes) // binding this to the parent
//   this.isChild = childAttributes.isChild; // this will be for any special attributes to the child
// }

// Child.prototype = Object.create(Parent.prototype);

              
            
!
999px

Console