--- id: 646d4b3d80ea98d824c8a4f9 title: Step 105 challengeType: 0 dashedName: step-105 --- # --description-- Finally, to handle potential edge cases, add an empty string property (you will need to use quotes) which is a function that takes a single argument and returns that argument. With that, your spreadsheet project is now complete. You are welcome to experiment with adding support for even more functions. # --hints-- Your `spreadsheetFunctions` object should have an empty string property. ```js assert.property(spreadsheetFunctions, ""); ``` Your empty string property should be a function. ```js assert.isFunction(spreadsheetFunctions[""]); ``` Your empty string property function should return the argument. ```js assert.deepEqual(spreadsheetFunctions[""]([1,2,3]), [1,2,3]); ``` # --seed-- ## --seed-contents-- ```html Functional Programming Spreadsheet
``` ```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; } ``` ```js const infixToFunction = { "+": (x, y) => x + y, "-": (x, y) => x - y, "*": (x, y) => x * y, "/": (x, y) => x / y, } const infixEval = (str, regex) => str.replace(regex, (_match, arg1, operator, arg2) => infixToFunction[operator](parseFloat(arg1), parseFloat(arg2))); const highPrecedence = str => { const regex = /([\d.]+)([*\/])([\d.]+)/; const str2 = infixEval(str, regex); return str === str2 ? str : highPrecedence(str2); } 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)]; } --fcc-editable-region-- const spreadsheetFunctions = { sum, average, median, even: nums => nums.filter(isEven), someeven: nums => nums.some(isEven), everyeven: nums => nums.every(isEven), firsttwo: nums => nums.slice(0, 2), lasttwo: nums => nums.slice(-2), has2: nums => nums.includes(2), increment: nums => nums.map(num => num + 1), random: ([x, y]) => Math.floor(Math.random() * y + x), range: nums => range(...nums), nodupes: nums => [...new Set(nums).values()] } --fcc-editable-region-- const applyFunction = str => { const noHigh = highPrecedence(str); const infix = /([\d.]+)([+-])([\d.]+)/; const str2 = infixEval(noHigh, infix); const functionCall = /([a-z0-9]*)\(([0-9., ]*)\)(?!.*\()/i; const toNumberList = args => args.split(",").map(parseFloat); const apply = (fn, args) => spreadsheetFunctions[fn.toLowerCase()](toNumberList(args)); return str2.replace(functionCall, (match, fn, args) => spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()) ? apply(fn, args) : match); } 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)); 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))); const cellRegex = /[A-J][1-9][0-9]?/gi; const cellExpanded = rangeExpanded.replace(cellRegex, match => idToText(match.toUpperCase())); const functionExpanded = applyFunction(cellExpanded); return functionExpanded === x ? functionExpanded : evalFormula(functionExpanded, cells); } 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('=')) { element.value = evalFormula(value.slice(1), Array.from(document.getElementById("container").children)); } } ``` # --solutions-- ```html Functional Programming Spreadsheet
``` ```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; } ``` ```js const infixToFunction = { "+": (x, y) => x + y, "-": (x, y) => x - y, "*": (x, y) => x * y, "/": (x, y) => x / y, } const infixEval = (str, regex) => str.replace(regex, (_match, arg1, operator, arg2) => infixToFunction[operator](parseFloat(arg1), parseFloat(arg2))); const highPrecedence = str => { const regex = /([\d.]+)([*\/])([\d.]+)/; const str2 = infixEval(str, regex); return str === str2 ? str : highPrecedence(str2); } 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 = { "": x => x, sum, average, median, even: nums => nums.filter(isEven), someeven: nums => nums.some(isEven), everyeven: nums => nums.every(isEven), firsttwo: nums => nums.slice(0, 2), lasttwo: nums => nums.slice(-2), has2: nums => nums.includes(2), increment: nums => nums.map(num => num + 1), random: ([x, y]) => Math.floor(Math.random() * y + x), range: nums => range(...nums), nodupes: nums => [...new Set(nums).values()] } const applyFunction = str => { const noHigh = highPrecedence(str); const infix = /([\d.]+)([+-])([\d.]+)/; const str2 = infixEval(noHigh, infix); const functionCall = /([a-z0-9]*)\(([0-9., ]*)\)(?!.*\()/i; const toNumberList = args => args.split(",").map(parseFloat); const apply = (fn, args) => spreadsheetFunctions[fn.toLowerCase()](toNumberList(args)); return str2.replace(functionCall, (match, fn, args) => spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()) ? apply(fn, args) : match); } 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)); 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))); const cellRegex = /[A-J][1-9][0-9]?/gi; const cellExpanded = rangeExpanded.replace(cellRegex, match => idToText(match.toUpperCase())); const functionExpanded = applyFunction(cellExpanded); return functionExpanded === x ? functionExpanded : evalFormula(functionExpanded, cells); } 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('=')) { element.value = evalFormula(value.slice(1), Array.from(document.getElementById("container").children)); } } ```