Learn Functional Programming by Building a Spreadsheet - Step 25

JavaScript
1

Tell us what’s happening:

Task is to check if length is even and return the mean of middle if it is and return middle if it is not.What is wrong?

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; if(isEven(length)){return getMean(middle);} else{return Math.floor(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/137.0.0.0 Safari/537.36 Edg/137.0.0.0

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 25

2

Please write this in an easier to read fashion.

const median = nums => {
  const sorted = nums.slice().sort((a, b) => a - b);
  const length = sorted.length;
  const middle = length / 2 - 1;

  if(isEven(length)) {
    return getMean(middle);
  } else{
    return Math.floor(middle);
  }
}

I’m not sure the variable middle is doing what you think here.

3

First of all, you are trying to use getMean, when your function is called average.

Then there are two scenarios, when sorted.length is even or odd. It may be easier to define the middle variable for each scenario (if/else). I used const middle = length / 2; for the even (inside if), and this for the odd (inside else) const middle = Math.floor(length / 2);.

Finally you just need to return the value, but middle is just the index of ‘sorted’ array. So calculate the average of the values ‘middle-1’ and middle’ if sorted is even, ‘else’ just return sorted[middle], if sorted is odd.