Learn Functional Programming by Building a Spreadsheet - Step 31

JavaScript
1

Tell us what’s happening:

if (element.id !=== value) {}; ==> fails. I am lost. Please help.

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 isEven = num => num % 2 === 0;
const sum = nums => nums.reduce((acc, el) => acc + el, 0);
const average = nums => sum(nums) / nums.length;

const median = nums => {
  const sorted = nums.slice().sort((a, b) => a - b);
  const length = sorted.length;
  const middle = length / 2 - 1;
  return isEven(length)
    ? average([sorted[middle], sorted[middle + 1]])
    : sorted[Math.ceil(middle)];
}

const spreadsheetFunctions = {
  sum,
  average,
  median
}

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);
  range(1, 99).forEach(number => {
    createLabel(number);
    letters.forEach(letter => {
      const input = document.createElement("input");
      input.type = "text";
      input.id = letter + number;
      input.ariaLabel = letter + number;
      input.onchange = update;
      container.appendChild(input);
    })
  })
}


// User Editable Region

const update = event => {
  const element = event.target;
  const value = element.value.replace(/\s/g, "");
  if (element.id !== value) {};
}

console.log('something')

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 31

1 Like
2

The instructions are giving you a big hint:

“…check if the value does not → include ← the id of the element.”

Do you know of a method that checks if a string is included in another string?

1 Like
3

It would be helpful if I could at least console log these variables and get some concrete detail about what I’m working with.

4

I have gotten console logs to print, but as far as I can tell I’m not working with arrays here, so includes doesn’t seem to be an option since its and array.prototype class.

5

This function is an event handler and is called when a specific event is triggered on an element. I believe in this case it is the change event on a text input in the spreadsheet. The event information (object) is passed into the function using the event parameter. That object contains a ton of information, including a pointer to the element it was called on. So you first set the element variable to that element using the target property. Then you got the value (string of text) that is in the input using the value property. So the value variable holds the string that is in the input. And you are correct, you can access the id value of the element using the id property. The id value is also a string.

So you have two strings, one stored in value and one stored in element.id. You want to check if the string in value does not include the string in element.id. I’ll give you a hint: MDN: String.prototype.includes(),

9 Likes
6

Thank you! I confirmed what you wrote with console logs. I stepped away from Javascript for a few weeks and am rusty. I see there is a string method for includes. This allowed me to pass it.

7

You should use the includes() method
Here is the code : [Solution redacted]

8

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
9

You’re right and I apology for it sincerlery :pray:

10

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