Bake a Cake explainer

The aim of this puzzle: Make a list (array) of ingredients (strings) needed to bake a cake.

Walkthrough of the solution: The cook() function is ready to turn ingredients into a cake but right now ingredients is just ‘flour’.

First, tap on the string ‘flour’ to highlight it. Next, tap the [] button to replace ‘flour’ with an empty array []. Now tap the str button to open the keyboard and type in the name of an ingredient like ‘sugar’ or ‘eggs’. Tap the empty space below the new ingredient you just entered and add another.

Once you have at least 2 strings inside the ingredients array, try running the code to bake your cake.

Sample code solution:
(Tap below to reveal)

var ingredients = [ 
    'flour', 
    'sugar', 
    'eggs', 
    'butter' 
];
cook(ingredients);

JavaScript Concepts: Data Structures (arrays), Variable Declaration, Calling Functions, Identifiers
Additional Code (hidden code that runs before the puzzle’s code):

const cook = array => {
    if (Array.isArray(array) && array.filter(i=>i!=='').length>1) {
        print('You baked a cake!');
    } else {
        print("That's not enough ingredients.");
    }
};
5 Likes

Did you just add this puzzle in late May? I went to look, and it was one which I hadn’t done. I also found a quiz I hadn’t done.

1 Like

@Scott_McNay — Yup! We’re continually improving the courses, and sometimes that means replacing, or adding, new Puzzles or Quizzes.

1 Like

Can i see the code running in the back? I’d there is any

2 Likes
const cook = array => {
  if (Array.isArray(array) && array.length > 1 && !array.includes('')) {
    print('You baked a cake!');
  } else {
    print("That's not enough ingredients.");
  }
};

There’s quite a bit of code here that hasn’t been taught before the Bake a Cake puzzle. Basically, cook is a function, like pickRandom() or drawBox(). When you put an array inside of the parentheses of cook(), it checks 3 things:

  1. Is this really an array? It shouldn’t be just a number, or a string, or something else.
  2. Does the array have more than 1 item? It shouldn’t be empty or only have 1 item.
  3. Are any items in the array blank? There shouldn’t be any empty strings which is just quote marks without anything in between.

If the thing in the parentheses passes all 3 checks, then the message 'You baked a cake!' gets printed out. If it fails any of the tests, then it prints out 'That's not enough ingredients.'

–Frankie

2 Likes

This is a good game forr a kid like me it is challenging

Does not helping :sob::sob::sob::sob::sob::sob::sob::unamused::unamused::unamused::unamused::unamused::unamused::sob::unamused::sob::unamused::sob::unamused::sob::unamused::sob::sob:

2 Likes

If you post a screenshot of your code, I could take a look at what’s happening.

–Frankie

So basically you have to press or use the array function for each ingredient.

Each ingredient will be a separate string on its own line, surrounded with quote marks around each and with commas in between. And all the strings should be inside the array, between the square brackets [].

–Frankie

May I know what the line ‘cook(ingredients);’ mean?

cook() is a function that was created just for this puzzle.

It takes 1 argument, and does 2 checks:

  1. Is the argument an array?
  2. If you don’t count any blank items (strings with no letters or numbers), does the array have at least 2 items?

If those checks are true, then it prints out, You baked a cake!. Otherwise, it prints out, That's not enough ingredients.

Code for the Cook Function
const cook = array => {
  if (Array.isArray(array) && array.filter(i=>i!=='').length > 1) {
    print('You baked a cake!');
  } else {
    print("That's not enough ingredients.");
  }
};

–Frankie

1 Like

Oh good to know. But could you explain the 2nd point of the checking criteria?

1 Like

Yes, I had a typo, sorry! I reworded it.

Here is the code for the 2nd check: array.filter(i => i !== '').length > 1.

Let’s say the array is ['butter','','sugar']. This contains 1 “empty string”, the item between 'butter' and 'sugar'. It is a string with zero characters, like a word with no letters.

The code array.filter(i => i !== ''), says to take the array and remove any items that are empty strings. That leave us with ['butter','sugar'].

The next step in the code is to get the .length which is just the number of items in the array. Since there are 2 items left, the length is 2.

Finally, we check if that number is greater than 1. 2 is greater than 1, so that part of our test is true.

These concepts are taught in later lessons (.filter(), arrow functions () => {}, .length).

–Frankie

1 Like

Sounds really cool.

It is clear to me now. I understood it properly.

Thank you so much for helping me to understand, Frankie.

2 Likes

Help please can I just get picture step by step of how to bake a cake I’ve been on it too long I’m going crazy

2 Likes

Hey there,

When the puzzle begins, the ingredients variable contains a single string. We want it to contain an array, which is a type of data that can hold multiple items. In this puzzle, we want it to contain multiple strings.

Delete the string 'flour' and tap the [ ] key on the keyboard to create an array. Then tap the str key to add a string to the array.

To complete the puzzle, you’ll need about 3 or 4 strings inside the array. Take a look at the solution code at the top of this thread.

Let me know if you have any questions.

Ben

The instructions on this are not very good. It tells you to add commas between the ingredients in the array. But you can’t do that. If you manually type in commas or single quote marks, the program inserts slashes and other strange characters that you can’t remove. So this isn’t really a coding exercise, its an exercise about learning to push the right buttons in the correct order. It took me many, many attempts to figure this out. I understand what the correct coding should look like, based on the previous games/exercises, and I could write it down and send it to you, but entering into the fields using the buttons provided, is not intuitive. I don’t believe coding javascript for a website uses buttons like this.

1 Like

How do I clear and go back to the original sample?

Hey there, tap the reset button to reset the starter code. You can find it at the top of the code keyboard. It looks like a browser refresh button.

You can also use the undo button to undo the last change you made to the code.

Hope this helps!
Ben