Project Meal Maker – trimmed solution

Hi everyone,

I’m quite new to programming (less than a month), and some exercises feel mammoth-like to me as a beginner. Such is the case with the Meal Maker project. Hence, today I decided to revisit it and declare it war (in a friendly way) with the best of my intentions … and resilience. :sweat_smile:

https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker

What did I find out after all this day’s detective work ? If you found this exercise somewhat challenging to digest, it may help to realize that steps 2-6 are of no effect to the specific purpose of randomizing a three course meal. This made me develop a stronger appreciation for different JS concepts and what code does what.

  1. I realized I could simply have appetizers, mains and desserts direct children of the menu object, which will shorten the neccessary code.
  2. I then had to adapt the getters and setters not to incur in a call stack error. Later, I also realized they have no impact for the purpose of randomizing a meal.

I’ve read it’s good practice to have getters and setters up. Also, having a _course section encapsulate the different courses may be helpful.
But it did help me better understand the exercise by realizing the above. Hope this may help you to.

Thanks, and good coding! :slight_smile:

(ps: it might also be easier to start with the project Team Stats - which is about creating a method to add object instances into an array - and then move back to Meal Maker)

5 Likes

@alyssavigil, perhaps it would be a good idea for the course author to weigh in on this topic. A lot of learners have grappled with this project.

6 Likes

I asked the team! We’ll see what they say. :muscle:

4 Likes

yes, and for the first time i found the tutorial not very explanatory, more like just execution from an experience coder doing coding than tutorial.

12 Likes

I can’t seem to understand this one. The get help was literally the same hints given by the project.

Yeah, this project needs a revamp. Hopefully that happens.

1 Like

Hi guys. I’ve been learning also and had some issues initially but eventually I got to sort it without help the second time around.

Key points would probably be the clear understanding of the this. keyword (which I’ve come to understand is a hot topic to everyone) and testing your methods as you build them.

In this case because you have 3 arrays declared but not initialised (aka empty) you wont be able to test them so I suggest either having something in there so you can log and see the results as you go.

Hope my code and suggestions help.

Happy Coding!

1 Like

This definitely helped clean up my code compared to the walkthrough… thank you! Still getting undefined values when I print it out though

Just sharing because CodeCademy asked me to. However I still struggled to understand the bit in step 5
Github: (https://github.com/LeopardSnake/MealMakerCC.git)

Inside your menu object, create an empty getter method for the _courses property.
So i coded the following:

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

The bit that I am struggling to get (followed the video walkthrough as well) is with regards to “Privacy in JavaScript”

  • _underscore properties are NOT meant to be changed or mutated

however in my mind it was supposed to be

get _courses() {
      return {
        appetizers: this.appetizers,
        mains: this.mains,
        desserts: this.desserts
      }

and not

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

What is the real difference as courses without the _underscore seems undefined - at least to me

We don’t see it, but when the code is run, JS creates courses in the background, so it is defined.

Hi there. I’d love to hear just a little more from the team on the getters and setters, as per the original statement of this forum topic.

I can totally comment out the getters and setters code for appertizers, mains and desserts e.g.

  get appetizers() {
    return this._courses.appertizers;
  },
  set appetizers(appetizerIn) {
    this._courses.appetizers = appetizerIn;
  },

And the whole thing still works? :sweat_smile:

then in Step 8 in the hint, it is mentioned in comments // also try using your setter method!

    this._courses[courseName].push(dish); // also try using your setter method!

I’d love to find out more here, thanks! :blush:

I’ve re-read the exercise and the docs and I see that JavaScript getter and setter methods are helpful in part because they offer a way to intercept property access and assignment, and allow for additional actions to be performed before these changes go into effect.

So in this case, we were literally getting and setting the values directly without modifications or checking, so it would work with or without being there. I guess if we had done some checks and then forces an error like assigning a string to where there should be a number, we’d have seen the usage of the getter or setter.

yes this project is ridiculous with bad explanations. My friend has been using JS for 10+ years, his favorite language, and says people use object oriented programming very rarely. So i’m not too worried about my lack of understanding on this poorly designed project

8 Likes

9 months later and I agree. However, effective learning is often frustrating!!!

1 Like

OK beyond frustrating, I kept getting TypeError: Cannot read property 'push' of undefined.

I went and did a diff between my code and the gitHub project code. (MealMakerCC/mealMaker.js at main · LeopardSnake/MealMakerCC · GitHub) cleaned up some readability formatting, but nothing was different, except the data inputs.

code on the left (mine) produces TypeError, code on the right (gitHub) works.

I saw something about initializing the empty arrays, but doesn’t look like that is happening with the code on the right?

any clues?

1 Like

I would love an answer to this as well. OP, I hope you figured it out.

I had a similar issue.
re-wrote the whole code.
and then it was fine.
go figure…

I found this very confusing as well.
It did help me in the sense that it forced me to look up getters and setters and objects and methods and properties and try to settle all these things in my mind.
I must admit - I had no clue and needed to rely on the hints but they also did not produced a code that was functioning so
i looke at the video.
Following the video was helpful as a study aid - trying to work out what happens in the code was very helpful.
I also realized that I could comment out the setters section and it does not affect the code.
I didn’t brave to comment out the getters.
Any how I wrote all thoughts about the project highlighting what I find difficult or unclear.
Am happy to provide these notes to the people who write the instructions. (might be helpful for them to see it from the point of view of a complete beginner)
Cheers

1 Like

generateRandomMeal(){

let appetizer = this.getRandomDishFromCourse('appetizers')

let main = this.getRandomDishFromCourse('mains')

let dessert = this.getRandomDishFromCourse('desserts')

let total = appetizer.price + main.price + dessert.price

return `Your Meal: ${appetizer.name}, ${main.name}, ${dessert.name} and Total Price is: ${total}`

}

I’m having problems understanding the return function. Can anyone explain, please?