Learn Functional Programming by Building a Spreadsheet - Step 60

JavaScript
1

Tell us what’s happening:

This project makes absolutely no sense to me anymore.
Am I the only one who’s totally lost?
Is this just being explained poorly or am I just an idiot? :slight_smile:

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 => cell.id === id).value;
  const rangeRegex = /([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi;
  const rangeFromString = (num1, num2) => range(parseInt(num1), parseInt(num2));
  const elemValue = num => character => idToText(character + num);
  const addCharacters = character1 => character2 => num => charRange(character1, character2).map(elemValue(num));
  const rangeExpanded = x.replace(rangeRegex, (match, char1, num1, char2, num2) => rangeFromString(num1, num2).map(addCharacters(char1)(char2)));
}

// 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 60

2

Welcome to the community, @kevinberden!

First of all, you’re not an idiot! I thought this project was challenging, too. And, based on the number of comments I added to the evalFormula function in the file on my local system, this one was throwing me too. I’d say just muddle through it.

The good news is that you’re probably on the easiest step in the whole project since you just need to add an underscore before the unused variable, match. :smile:

1 Like
3

I actually managed to do that one indeed :smiley: I was just getting frustrated after all the previous things I had to do.
The issue I have with this project is that I’m following the instructions, but I don’t really know what I’m doing. I thought I was quite getting the hang of JavaScript and then fCC threw this at me, a bit discouraging.
I’m not really an apt mathematician so I guess this might be why I don’t really understand what’s going on here.

4

You’re doing great! Please try not to get discouraged. This is just a challenging project. One of the concepts I had trouble with was currying. And in one of the comments where I’m trying to explain it to myself for future reference, I actually wrote “clear as mud!”. :rofl:

5

Thanks for the motivational pep talk in any case :smiley: I’m almost finished with this project, I think I’ll have to print it out on paper and make a lot of notes to make sense of it afterwards. That’s my last resort when I’m really stuck on something :wink: