Coder Social home page Coder Social logo

oop-challenge's Introduction

Flowers as Objects (contd.)

We have a fully functioning Flower object that we can use to create flowers.

function Flower(){
    this.color = "red";
    this.petals = 32;
    this.smellsPretty= true;
    this.sniff = function(){
        console.log("Sniff Sniff Sniff!");
    };
    // Demonstrates use of arguments with methods
    this.smellsGood = function(answer) {
    	if (answer) {
    		return 'This flower smells amazing!';
    	} else {
    		return 'What a noxious weed!';
    	}
    };
    // Demonstrates use of local object variables
    this.describe = function(answer) {
        alert("This flower is " + this.color + ".");    
	}
}

While this object might be pretty and smell nice, the core functionality is a bit lacking. Objects have the benefit of being able to interact with other objects. We can do this by passing into object methods entire other objects or other object properties.

/// Demonstrates object to object interaction
  this.compare =  function(otherFlower) {
      return("My " + this.color + " flower is much prettier than your " +
        otherFlower.color + " flower :P");
  };

Notice the parameter used with the compare method. other- is used to denote the parameter as a similar but foreign object. This convention helps with knowing which object is which.


Custom Objects

We can use parameters with our object constructor!
function Flower(color, petals, smellsPretty){
    this.color = color;
    this.petals = petals;
    this.smellsPretty= smellsPretty;
    this.sniff = function(){
        console.log("Sniff Sniff Sniff!");
    };
    // Demonstrates use of arguments with methods
    this.smellsGood = function(answer) {
    	if (answer) {
    		return 'This flower smells amazing!';
    	} else {
    		return 'What a noxious weed!';
    	}
    };
    // Demonstrates use of local object variables
    this.describe = function(answer) {
        alert("This flower is " + this.color + ".");
	  }
    /// Demonstrates object to object interaction
    this.compare =  function(otherFlower) {
        return("My " + this.color + " flower is much prettier than your " +
          otherFlower.color + " flower :P");
    };
    this.render = function() {
        $('body').append("<p>My pretty flower is " + this.color +
          " and has " + this.petals + " pristine petals.</p>");
    }
}

Now the three properties (color, petals, and smellsPretty) will reflect the values of whatever arguments were passed in when the object was created.

var chrysanthenum = new Flower("pink", 65, false);
var rose = new Flower("red", 32, true);
var lily = new Flower("yellow", 6, true);

These objects still have all of the methods and abilities of the previous objects we made. The main difference is that they can be customized with specific properties at the time of object instantiation.

Pair Challenge

Create a custom Flower object based on the flower on your table. Decided amongst your pair the type of flower, the flower's main color, number of petals, and whether or not it smells pretty. Think up some other possible properties. We need more properties! Properties are great!

Now we should have at least seven individual and unique Flower objects we can use. Lets find the best new properties and integrate them into our class-wide Flower object.

Cross-Pollination Challenge

Now that we are awesome Flower experts, lets try our hand at cross-pollinating two flower objects to create an entirely NEW Flower object!

  • Create a method called crossPollinate
  • The method will have another Flower object as a parameter.
  • Return a new Flower. Make the Flower's color a mix of both 'parent' colors. (i.e. red, yellow = "red-yellow") We don't care about the color wheel.
  • Make the new petal count an average between the two parents' petal counts.
  • The smellPretty gene is recessive unfortunately. This means that a flower will smell pretty IF and only IF both flowers smell pretty.

Thought experiment: Could we create an intermediary object, maybe called Bee, that could facilitate cross-pollination and return a new flower? Flowers don't just bash their heads together and make new flowers in the real world! They need bees! What are some methods we could assign to a Bee object?

Uber Challenge

  • Create a method within the Flower object that will render a description of your flower along with all of its vital statistics we have collected as well as an image to a simple website.
  • Name your webpage "The San Francisco First Annual General Assembly Parade of Flowers."
  • If we are consistent botanists all of our objects will have the same methods and properties.

Stretch Challenge

  • Create a vase object which simply contains an array of flower objects.
  • Crate a method placeFlower() that accepts a flower object as a parameter and inserts the object into the array
  • Create a wilt() method that decrements each flower by one petal. :(
  • Create a water() method that increments each flower by one petal. :)

Getting Started

  1. Fork this repo, and clone it into your develop folder on your local machine.
  2. Work on the challenges in either the node console, chrome console or whatever method you feel comfortable to complete the challenges.
  3. Once you are finished create a solutions.js file that has each of your solutions with a comment above it.
solutions.js

//cross-pollination solutions

//your code here
etc.

Submission

  • As you make code changes, frequently commit and push to GitHub.
  • Once you've finished the assignment and pushed your work to GitHub, make a pull request from your fork to the original repo.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.