Meal Maker

Hi, i have been learning the basics of Javascript and everything was going well until the Meal maker project. This project has really taken away all my confidence and made me feel like i’ve learnt nothing to the point im considering giving up. I had to use the help from every single hint and still i got it wrong wrong wrong. Could anyone please tell me what is wrong with this code? As a total beginner, this project really made me feel like giving up and starting a cupcake business instead or something.

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    deserts: []
},
  get appetizers() {},
  set appetizers(newAppetizers) {},
  get mains() {},
  set mains(newMains) {},
  get deserts() {},
  set deserts(newDeserts) {},
  get courses() {return {
    appetizers: this.appetizers,
    mains: this.mains,
    deserts: this.deserts} },
  addDishToCourse(courseName, dishName, dishPrice) {
     const dish = {
       name: [],
       price: [],
     }
     this._courses[courseName].push(dish); },
  getRandomDishFromCourse(courseName) {
    const dishes = this.courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
  },
  generateRandomMeal: function() {
    const appetizer = this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const desert = this.getRandomDishFromCourse('deserts');
    const totalPrice = appetizer.price + main.price + desert.price
    return `your meal starts with a ${appetizer.name}, then you will have a ${main.name} with ${desert.name}, which total price will be ${totalPrice}.`;
  }
};

menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25)
menu.addDishToCourse('appetizers', 'tyu Salad', 2.25)
menu.addDishToCourse('deserts', '8964 Salad', 3.25)
menu.addDishToCourse('deserts', '5222 Salad', 5.25)
menu.addDishToCourse('mains', 'lula Salad', 6.25)
menu.addDishToCourse('mains', 'lilo Salad', 7.25)
var meal = menu.generateRandomMeal();
console.log(meal);

TypeError: Cannot read property ‘length’ of undefined

1 Like

Let’s start by blocking the code we don’t want to run yet. The calls at the bottom is a good place to kick off.

//menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);
/*
menu.addDishToCourse('appetizers', 'tyu Salad', 2.25)
menu.addDishToCourse('deserts', '8964 Salad', 3.25)
menu.addDishToCourse('deserts', '5222 Salad', 5.25)
menu.addDishToCourse('mains', 'lula Salad', 6.25)
menu.addDishToCourse('mains', 'lilo Salad', 7.25)
var meal = menu.generateRandomMeal();
console.log(meal);
*/
console.log(menu.courses);    // test the getter for menu._courses

Making no other changes, run that code. What error message is given?

1 Like

Thanks for your reply!
Ive blocked the last part and tested the getter. Got:

{ appetizers: undefined, mains: undefined, deserts: undefined }

1 Like

Perfect. That tells us those objects have not been defined (or properly referenced). Now we need to trace back to where they should have been defined and find out why. Can you start us off?

Hint

this.appetizers

is in the wrong context to be followed. menu does not have an appetizers property. Think _courses.

We’re not moving ahead until this getter is functioning correctly. We should see three empty arrays.

1 Like

You mean this

const menu = {
  _courses: {
  get courses() {return {
    appetizers: this.appetizers,
    mains: this.mains,
    deserts: this.deserts} },
  }
};

Should be changed to this?

const menu = {
  _courses: {
  get courses() {return {
    appetizers: [],
    mains: [],
    deserts: []} },
  }
};

That would give me back:

{ appetizers: , mains: , deserts: }

We would never manipulate or fudge in data within a getter. The data must exist elsewhere. We’re only gathering it to return.

For now, let’s forego const and let. We’re in global scope and not much else is going on so we can relax. This way you can keep reassigning functions and structures in the console without having to refresh.

menu = {

}

That’s the primary object.

menu = {
  _courses: {

  }
}

That’s the secondary object.

menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: []
  }
}

Those are the tertiary objects. Note their context (inside _courses).

The courses getter is written in the context of menu.

  get courses() {
    return {
      appetizers: ...,    // absolute reference, no getter
      mains: ...,
      deserts: ...
    } 
  },
  ...
1 Like

Oh just found it.
My getters were empty and i was not applying the randomIndex function over dishes.

Thank you very much!

1 Like

You’re welcome. Just for the record, what does your get courses method look like, now?

1 Like

Here

 get courses() {return {
    appetizers: this.appetizers,
    mains: this.mains,
    deserts: this.deserts, } },

I had forgotten to include the

  • return this._courses.appetizers
  • this._courses.appetizers = appetizers

inside the get appetizers() and set appetizers(appetizers) respectively.

Again, thank you very much.

1 Like

Let’s not be too satisfied. Just saying. If there is anything that bugs you about this program, we should talk about it.