Learn Functional Programming by Building a Spreadsheet - Step 16

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
Here are the instructions:

Step 16

In your callback, you will need to make two function calls. Start by calling createLabel() and pass number as the argument. You should see some numbers appear in your spreadsheet.

Then call the .forEach() method on your letters array. Pass an empty callback function which takes a letter parameter.

Here is my code:

range(1, 99).forEach(number => {
    createLabel(number);
    letters.forEach((letter) => {});
  })

And here is the error message:
Sorry, your code does not pass. Don’t give up.

Your letters.forEach() callback function should be nested inside the range(1, 99).forEach(number => {} callback function.

I don’t understand why it says that letters.forEach() should be nested inside range(1, 99).forEach(number => {}) callback function because IT IS already the case.
And tried to type it again and again part by part and I noticed that if I just write letters.forEach() it just says me to add a callback function inside and then if I type letters.forEach(() => {}) it just says to add the letter parameter and when I do it then I get the error message I’ve shared in that post.

To summarize, there is no nesting problem before I write the full expression which is a weird behavior.

Anyone has ever encounterd that problem or have any idea on how to fix it?
Thanks in advance for those who find a solution.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Functional Programming Spreadsheet</title>
  </head>
  <body>
    <div id="container">
      <div></div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
#container {
  display: grid;
  grid-template-columns: 50px repeat(10, 200px);
  grid-template-rows: repeat(11, 30px);
}

.label {
  background-color: lightgray;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
}

/* file: script.js */
const range = (start, end) => Array(end - start + 1).fill(start).map((element, index) => element + index);
const charRange = (start, end) => range(start.charCodeAt(0), end.charCodeAt(0)).map(code => String.fromCharCode(code));

window.onload = () => {
  const container = document.getElementById("container");
  const createLabel = (name) => {
    const label = document.createElement("div");
    label.className = "label";
    label.textContent = name;
    container.appendChild(label);
  }
  const letters = charRange("A", "J");
  letters.forEach(createLabel);

// User Editable Region

  range(1, 99).forEach(number => {
    createLabel(number);
    letters.forEach((letter) => {});
  })

// User Editable Region

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 16

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Sorry I didn’t see your reply earlier and now I cannot edit my post. How could I delete it to rewrite it the right way?

4

the autogenerated message doesn’t always get it right, if you think you explained the issue in your own words, you can ignore it

5

the tests don’t like the semicolon at the end of this line, even if it’s correct code

6

Main problem: nesting issue that appear randomly?!

Here are the instructions:

Step 16

In your callback, you will need to make two function calls. Start by calling createLabel() and pass number as the argument. You should see some numbers appear in your spreadsheet.

Then call the .forEach() method on your letters array. Pass an empty callback function which takes a letter parameter.

Here is what happen step by step:

Step 0: empty code

range(1, 99).forEach(number => {
    
  })

Error message:

Sorry, your code does not pass. Don’t give up.

You should call your createLabel() function.

Step 1: adding the function as recommended

range(1, 99).forEach(number => {
    createLabel();
  })

Error message:

Sorry, your code does not pass. Try again.

You should call the .forEach() method on your letters array.

Step 2: calling .forEach() on letters as recommended

range(1, 99).forEach(number => {
    createLabel();
    letters.forEach();
  })

Error message:

Sorry, your code does not pass. Keep trying.

You should pass a callback function with arrow syntax to your .forEach() method.

Step 3: passing the callback function

range(1, 99).forEach(number => {
    createLabel();
    letters.forEach(() => {});
  })

Error message:

Sorry, your code does not pass. You’re getting there.

Your callback function should have a letter parameter.

Step 4: adding the letter parameter

range(1, 99).forEach(number => {
    createLabel();
    letters.forEach((letter) => {});
  })

Error message:

Sorry, your code does not pass. Hang in there.

Your letters.forEach() callback function should be nested inside the range(1, 99).forEach(number => {} callback function.

Why do it complains about nesting only at step 4?

By the way it should ask me to pass the number argument for createLabel().

Step 5: with the number argument for createLabel()

range(1, 99).forEach(number => {
    createLabel(number);
    letters.forEach((letter) => {});
  })

Same error message:

Sorry, your code does not pass. Don’t give up.

Your letters.forEach() callback function should be nested inside the range(1, 99).forEach(number => {} callback function.

Any idea?

8

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

9

I have merged your two topics, please do not create multiple topics to ask for help with the same step

10

Actually you could delete the first one because I cannot edit it nor delete it. That’s the reason why I created another one.

11

I have already answered you, deleting a topic after someone has already taken time to try to help you is not appropriate

12

If you haven’t seen it, my answer to your issue is here

1 Like
13

Thank you very much. And yes unfortunately I didn’t see your initial answer

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.