Learn Functional Programming by Building a Spreadsheet - Step 32 - What is this bit doing!

JavaScript
1

Tell us what’s happening:

Guys can somone please explain this single part of the if statement i created ?

if (!value.includes(element.id))

im not stuck on the solution just not sure what is happening and would like to understand this part of the if statement.

why would i not want to call the update funciton if my element ID is the value ?

and how would the element ID endup in the value in the first place ?

thanks

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 (!value.includes(element.id)) {

  }
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 32

2

Hi there!
The instructions is asking you:
Use the && operator to add a second condition to your if statement that also checks if the first character of value is =.
You didn’t tried anything?
hint: get the first index of value and assign it the character = string.

3

Hi Hansan thank you for answering,

but for clarity, i am not stuck on finding the solution i have already passed the test,

i am trying to understand why this piece of code is neccesarry ,

why am i looking to avoid input if it contains the element ID

4

This is a complete guess as I am not the developer of this code but it seems to me the reason for the exclusion of the update call in the case of the value of the cell including the id is because the update call evaluates formulas and those formulas have to put their output somewhere and that somewhere has to be the cell which created the formula. (??) Therefore the cell that created the formula cannot itself be a part of the calculation being requested.

As for how the id ends up in the value? Manually. A person can type a formula to add the values of different cells for example and when writing the cell ids, they may write the current cell id.

5

oh sorry!
i did not noticed your question.
the if (!value.includes(element.id)) check is used to ensure that the update function is only called for items that haven’t already been processed or included in value. The presence of element.id in value usually indicates that the item has already been handled or needs to be excluded from further processing.