Learn Functional Programming by Building a Spreadsheet - Step 25

JavaScript
1

Tell us what’s happening:

What is wrong in this code? I really don’t understand it.: return isEven(length) ? average([sorted[middle - 1], (sorted[middle])]) : Math.ceil(sorted[middle]);

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;


// User Editable Region

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 - 1], (sorted[middle])]) : Math.ceil(sorted[middle]);
}

// User Editable Region


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;
      container.appendChild(input);
    })
  })
}

Your browser information:

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

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 25

1 Like
2

I have now this code: return isEven(length) ? average([sorted[middle], sorted[middle + 1]]) : Math.ceil(sorted[middle]); but it still says 1 issue: If the ternary is false, you should return the value of sorted at the middle index. Use Math.ceil() to round the middle value up.

3

you need to round middle. If middle is 3.5, there is nothing at index 3.5

4

I already doing this with Math.ceil(): const middle = length / 2 - 1;
return isEven(length) ? average([sorted[middle], sorted[middle + 1]]) : Math.ceil(sorted[middle]);

5

you are roudning undefined
you need to round middle before using it to access the array, you don’t need to round the array element.

If the length of the array is 7, you are writing Math.ceil(sorted[2.5]) which results in Math.ceil(undefined)

you need to use Math.ceil to get to sorted[3]

1 Like
6

It doesn’t work: return isEven(length) ? average([sorted[middle], sorted[middle + 1]]) : Math.ceil(middle); and even if i do this: const middle = Math.floor(length / 2);
return isEven(length) ? average([sorted[middle + 1], sorted[middle]]) : Math.ceil(sorted[middle]); it is still false.

7

going better, now use the rounded number as index in the bracket notation to access the array