Bake a Cake explainer

#1

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

2 Likes
Bake a Cake explainer OLD
#3

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.

#4

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

#5

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

1 Like
#6
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

1 Like
#7

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

#8

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:

#9

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

–Frankie

#10

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

#11

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

#12

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

#13

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

#14

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

#15

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

#16

Sounds really cool.

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

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

1 Like
#17

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

#18

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