Learn Functional Programming by Building a Spreadsheet - Step 35

JavaScript
1

Tell us what’s happening:

I am trying to return the value property of the return value of the .find() method.

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));


// User Editable Region

const evalFormula = (x, cells) => {
  const idToText = id => cells.find(cell => element.value.find());
}

// User Editable Region


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);
    })
  })
}

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

  }
}

Your browser information:

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

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 35

2

Hi there. The seeded code provides you with an input element and assigns it to the idToText variable. That is to say the cells.find method returns an input element. We don’t want the input element itself. We’re only after the value property contained in the input element returned by cells.find method.

I’d reset the challenge to bring back the seeded code. From there I would focus on getting the value from the element returned by cells.find. If you have any further questions please let me know.

Happy coding. :slight_smile:

3

i tried to use value.find() but it is still not working, can you be a bit more explicit for me?

4

You don’t use value.find. That code wouldn’t work for two reasons. A number doesn’t have a find method. Number two even if it did, you would not be able to retrieve the element as you are comparing an ID to a value.

The actual answer is actually a lot simpler than that. I would recommend resetting back to the seed code. From there, I would retrieve the value on the object returned by the find method.

5

i am still stuck in this stage, can you kindly provide more insight as to how i can go about it

6

solution redacted

It should be like this. You should find cell first with matching to cell’s id inside to cells array with callback function. But function return cell element itself, you need the value of that input element. You can access to value like this, using value property.

7

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
8

I actually do not understand his solution, you mind to be more explicit, please?

9

I would suggest rereading the suggestion @a2937 left for you here

specifically this part here

I would also suggest adding console statements so you better understand what idToText is

Try this code and open up the console

const evalFormula = (x, cells) => {
  const idToText = id => cells.find(cell => cell.id === id);
  console.log("this is idToText variable:",idToText("A1"))
}

const cells = [
  { id: "A1", value: 10 },
  { id: "B1", value: 20 },
  { id: "C1", value: "=sum(A1,B1)" }
];


console.log(evalFormula("C1", cells));

You should see the following in the console

this is idToText variable: { id: 'A1', value: 10 }
undefined

pay close attention to the first print statement here

this is idToText variable: { id: 'A1', value: 10 }

you see that idToText is an object.

The step wants you to access the value property from that object.

How do you access properties from an object?

Once you see the object, then it will make more sense what the answer is.

Hope that helps

10 
  const idToText = id => {
    const cell = cells.find(cell => cell.id === id);
    return cell.value  
  };
  return idToText(A1); 
};```                                             like this?
11

i still am unable to get past the stage

12

Your idToText function approach seems correct, you find to cell with id match and return to value of that but it may not be suitable for this lesson. If you recall the initial code of that stage, you’ll notice that the idToText function was nested inside the evalFormula function, and the lesson does not intend for this function to return anything that is this part of code is unneccessary.

The lesson aims to demonstrate how to write code that is clear and concise, with each line ideally returning a single value without the need for extra variable declarations or brackets. Therefore, if you adjust your idToText function to meet these requirements, you should be able to pass :).

13

thank you for your time, but still cant seem to get past this stage

14

I am struggling with finding the value property of the return value of the .find() method

15

You’re welcome. Sometimes coding can be very difficult, not just because of the code itself, but also because things may not always turn out as we expect or small differences can lead to significant results. That’s why developers always use version control systems. You can think of these lesson stages as your version control system, where your changes are not immediately applied to the client’s story request, even if the output wouldn’t change, you can revert your last change, reset the changes, and try again. You can do it🙂.

16

cells is an array of elements. If we jump to the end step, we can look at the evalFormula call site (usage). The second argument is the array of elements (cells parameter inside evalFormula).

evalFormula(value.slice(1), Array.from(document.getElementById("container").children)

So we call find on the array of elements (cells) and using the id parameter value passed to idToText when it is called we find the element. So the code from the previous step is.

const idToText = id => cells.find(cell => cell.id === id)

Now, instead of just returning the element which is what we do in the above code, we want that elements value property. We can dot onto the element find returns directly.

Example code with text elements and the innerText property (instead of input elements and the value property)

<p id="1">Text 1</p>
<p id="2">Text 2</p>
<p id="3">Text 3</p>
<p id="4">Text 4</p>

const paragraphs = document.querySelectorAll("p");

function getValueById(id, elements) {
  return elements.find((element) => id === element.id).innerText;
}

console.log(getValueById("2", Array.from(paragraphs))); // Text 2
console.log(getValueById("4", Array.from(paragraphs))); // Text 4
1 Like
17

like this

const evalFormula = (x, cells) => {
  const idToText = id => cells.find(cell => cell.id === id); return element ? element.value : null;
}
18

No, this returns the element.

elements.find((element) => id === element.id)

You can get the .value property on the element returned directly by just dotting on to it at the end.

array.find((param) => param === someCondition).someProperty

The code I posted using innerText is the same, you just use .value instead of .innerText

19

blown away at how simple the code was, thank you for assisting and for your patience.

20

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