JavaScript: Meal Planner Project - Feedback Request

Projects Skill Path Projects
1

Hi There!

Here’s the link to the project: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-javascript-syntax-part-ii/modules/fecp-learn-javascript-syntax-objects/projects/meal-maker

Would love to get your thoughts. Especially on this bit:

 addDishToCourse(courseName,dishName,dishPrice) {
     let dish = {
      name: dishName,
      price: dishPrice
    };
    this[courseName].push(dish);

I tried to use property value shorthand and I couldn’t get it to work. Is that the right place to use it?

Also, the get courses() function was requested in the checklist, but doesn’t seem to do anything. Any ideas where I should be using it?

Full Code:

const menu = {
  _courses: { //private, should only be mutated with 'set' functions now
    appetizers: [],
    mains: [],
    desserts: []
  },
  get appetizers(){  // gets and sets are used to create and pull the menu
    return this._courses.appetizers;
  },
  set appetizers(newAppetizer) {
    this._courses.appetizers = Object.values(newAppetizer);
  },
  get mains() {
    return this._courses.mains;
  },
  set mains(newMain) {
    this._courses.mains = Object.values(newMain);
  },
  get desserts() {
    return this._courses.desserts;
  },
  set desserts(newDessert) {
    this._courses.desserts = Object.values(newDessert);
  },
  get courses() { // The instructions require this 'get', but it doesn't seem to do anything...
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse(courseName,dishName,dishPrice) { // Creates dishes when called and adds them to the avialable menu
     let dish = {
      name: dishName,
      price: dishPrice
    };
    this[courseName].push(dish);
  },
  getRandomDishFromCourse(courseName) { // Selects from the courses loaded when generaing a meal
    let dishes = Object.values(this[courseName]);
    let randGen = Math.floor(Math.random() * dishes.length);
    return dishes[randGen];
  },
  generateRandomMeal() { // Pulls random dishes for each course
    let appetizer = this.getRandomDishFromCourse('appetizers');
    let main = this.getRandomDishFromCourse('mains');
    let dessert = this.getRandomDishFromCourse('desserts');
    let price = appetizer.price + main.price + dessert.price
    return `Bon appetite, may I suggest an appetizer of ${appetizer.name}, followed by a declicious main of ${main.name}. Perhaps we could top it off with a dessert of ${dessert.name}? Only £${price}!`
  }
}

// Inidividually added menu items
menu.addDishToCourse('appetizers','radish salad',6);
menu.addDishToCourse('appetizers','soup of the day',5);
menu.addDishToCourse('appetizers','chicken liver pate',9);
menu.addDishToCourse('mains','braised ox cheek with roasted vegtables',15);
menu.addDishToCourse('mains','turbot and apple',25);
menu.addDishToCourse('mains','ribeye steak and chips',20);
menu.addDishToCourse('desserts','eton mess',10);
menu.addDishToCourse('desserts','cheesecake',8);
menu.addDishToCourse('desserts','profiteroles',9);

meal = menu.generateRandomMeal() //assignsthe randomly generated meal
console.log(meal)

Appreciate your time!

2

I changed some of your code to take advantage of the getter and setter methods. I haven’t completed this project yet. I’m actually stuck because I wasn’t sure of the syntax of adding a getter and setter method to an empty object literal. eg

menu.get(space)appetizers = function() {};

that space throws a syntax error.

But if I were to edit the object directly instead of adding to an empty object this is how I would do it. Don’t take offense. Your code was good. This is just how I would do it. But I’m new to this stuff. So this is to help myself and hopefully you as well.

// I changed the way your setter methods work.
const menu = {
    _courses: { //private, should only be mutated with 'set' functions now
      appetizers: [],
      mains: [],
      desserts: []
    },
    get appetizers(){  // gets and sets are used to create and pull the menu
      return this._courses.appetizers;
    },
    set appetizers(newAppetizer) {
      this._courses.appetizers.push(newAppetizer);
    },
    get mains() {
      return this._courses.mains;
    },
    set mains(newMain) {
      this._courses.mains.push(newMain);
    },
    get desserts() {
      return this._courses.desserts;
    },
    set desserts(newDessert) {
      this._courses.desserts.push(newDessert);
    },
    get courses() { // The instructions require this 'get', but it doesn't seem to do anything...
      return {
        appetizers: this.appetizers,
        mains: this.mains,
        desserts: this.desserts
      }
    },
    // addDishToCourse(courseName,dishName,dishPrice) { // Creates dishes when called and adds them to the avialable menu
    //    let dish = {
    //     name: dishName,
    //     price: dishPrice
    //   };
    //   this[courseName].push(dish);
    // },
    /**I used the setter method you used above within this method */
    addDishToCourse(courseName, dishName, dishPrice) {
        this[courseName] = {[dishName]: dishPrice};
    },
    // getRandomDishFromCourse(courseName) { // Selects from the courses loaded when generaing a meal
    //   let dishes = Object.values(this[courseName]);
    //   let randGen = Math.floor(Math.random() * dishes.length);
    //   return dishes[randGen];
    // },
    /**I rewrote this method to take advantage of the getter methods you defined above */
    getRandomDishFromCourse(courseName) {
        let dishes = this.courses[courseName];
        let randGen = Math.floor(Math.random() * dishes.length);
        return dishes[randGen];
    },
//     generateRandomMeal() { // Pulls random dishes for each course
//       let appetizer = this.getRandomDishFromCourse('appetizers');
//       let main = this.getRandomDishFromCourse('mains');
//       let dessert = this.getRandomDishFromCourse('desserts');
//       let price = appetizer.price + main.price + dessert.price
//       return `Bon appetite, may I suggest an appetizer of ${appetizer.name}, followed by a declicious main of ${main.name}. Perhaps we could top it off with a dessert of ${dessert.name}? Only £${price}!`
//     }
//   }
// I rewrote part of this method to access the right part of object after I changed the way your methods work.
  generateRandomMeal() { // Pulls random dishes for each course
    let appetizer = this.getRandomDishFromCourse('appetizers');
    let main = this.getRandomDishFromCourse('mains');
    let dessert = this.getRandomDishFromCourse('desserts');
    // I rewrote this to key into the return value of getRandomDishFromCourse()
    // For the price I used Object.values() that returns an array of values from an object. Thats why I keyed into the index at 0
    let price = Object.values(appetizer)[0] + Object.values(main)[0] + Object.values(dessert)[0];
    // I used Object.keys() that returns an array of all the keys accessed the key at index 0
    return `Bon appetite, may I suggest an appetizer of ${Object.keys(appetizer)[0]}, followed by a declicious main of ${Object.keys(main)[0]}. Perhaps we could top it off with a dessert of ${Object.keys(dessert)[0]}? Only £${price}!`
  }
}
  
// Inidividually added menu items
menu.addDishToCourse('appetizers','radish salad',6);
menu.addDishToCourse('appetizers','soup of the day',5);
menu.addDishToCourse('appetizers','chicken liver pate',9);
menu.addDishToCourse('mains','braised ox cheek with roasted vegtables',15);
menu.addDishToCourse('mains','turbot and apple',25);
menu.addDishToCourse('mains','ribeye steak and chips',20);
menu.addDishToCourse('desserts','eton mess',10);
menu.addDishToCourse('desserts','cheesecake',8);
menu.addDishToCourse('desserts','profiteroles',9);

meal = menu.generateRandomMeal() //assignsthe randomly generated meal
console.log(meal);
1 Like
3

Thanks, I appreciate the feedback and I really like the way you’ve rewritten getRandomDishFromCourse() - that’s much better.

I think your solution using the dishName and price as key-value pairs is a really clean way of completing the exercise here, my only challenge would be that it’s less flexible to build on in future (if you needed to add allergens or similar in a future build).

4

I’ve been thinking about your reply. I could refactor the code and maybe I could make a function or method on the object that would be part of the setter methods like set mains(dishName, price, possAlergen) {returns an dish object}. I have no life. I could use the practice and its all in the name of learning. Are you familiar with git and github?

5

Hey - yeah that’s a great shout, could add in here maybe?

   addDishToCourse(courseName,dishName,dishPrice,allergens) { // Creates dishes when called and adds them to the avialable menu
     let dish = {
      name: dishName,
      price: dishPrice,
      allergens: allergens //allergens could be added as an array, with the full name?
    };
    this[courseName].push(dish);

I am not familiar with Github (yet) for the embarassing reason that it was confusing when i first looked and I can see there is a module on it coming up in the full-stack path that will explain it, so i just decided to wait for that :flushed:

I will be famliiar with it soon!

6

You seem to be moving at the same pace as me. Even though I’m sort of relearning this stuff. See my other post for a great idea I had. On how we could help each other become stronger coders.