Learn Advanced Array Methods by Building a Statistics Calculator - Step 37

JavaScript
1

Tell us what’s happening:

I am stuck on this step everything i have tried does not work. Pls can i have some help

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" />
    <script src="./script.js"></script>
    <title>Statistics Calculator</title>
  </head>
  <body>
    <h1>Statistics Calculator</h1>
    <p>Enter a list of comma-separated numbers.</p>
    <form onsubmit="calculate(); return false;">
      <label for="numbers">Numbers:</label>
      <input type="text" name="numbers" id="numbers" />
      <button type="submit">Calculate</button>
    </form>
    <div class="results">
      <p>
        The <dfn>mean</dfn> of a list of numbers is the average, calculated by
        taking the sum of all numbers and dividing that by the count of numbers.
      </p>
      <p class="bold">Mean: <span id="mean"></span></p>
      <p>
        The <dfn>median</dfn> of a list of numbers is the number that appears in
        the middle of the list, when sorted from least to greatest.
      </p>
      <p class="bold">Median: <span id="median"></span></p>
      <p>
        The <dfn>mode</dfn> of a list of numbers is the number that appears most
        often in the list.
      </p>
      <p class="bold">Mode: <span id="mode"></span></p>
      <p>
        The <dfn>range</dfn> of a list of numbers is the difference between the
        largest and smallest numbers in the list.
      </p>
      <p class="bold">Range: <span id="range"></span></p>
      <p>
        The <dfn>variance</dfn> of a list of numbers measures how far the values
        are from the mean, on average.
      </p>
      <p class="bold">Variance: <span id="variance"></span></p>
      <p>
        The <dfn>standard deviation</dfn> of a list of numbers is the square
        root of the variance.
      </p>
      <p class="bold">
        Standard Deviation: <span id="standardDeviation"></span>
      </p>
    </div>
  </body>
</html>

/* file: styles.css */
body {
  margin: 0;
  background-color: rgb(27, 27, 50);
  text-align: center;
  color: #fff;
}

button {
  cursor: pointer;
  background-color: rgb(59, 59, 79);
  border: 3px solid white;
  color: white;
}

input {
  background-color: rgb(10, 10, 35);
  color: white;
  border: 1px solid rgb(59, 59, 79);
}

.bold {
  font-weight: bold;
}

/* file: script.js */
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;

const getMedian = (array) => {
  const sorted = array.toSorted((a, b) => a - b);
  const median =
    sorted.length % 2 === 0
      ? getMean([sorted[sorted.length / 2], sorted[sorted.length / 2 - 1]])
      : sorted[Math.floor(sorted.length / 2)];
  return median;
}


// User Editable Region

const getMode = (array) => {
  const counts = {};
  array.forEach(el => counts[el] = (counts[el] || 0) + 1);
  const uniqueCounts = new Set(Object.values(counts));
  if (uniqueCounts.size === 1) {
    return null;
  }

// User Editable Region



const calculate = () => {
  const value = document.querySelector("#numbers").value;
  const array = value.split(/,\s*/g);
  const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
  
  const mean = getMean(numbers);
  const median = getMedian(numbers);

  document.querySelector("#mean").textContent = mean;
  document.querySelector("#median").textContent = median;
}

Your browser information:

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

Challenge Information:

Learn Advanced Array Methods by Building a Statistics Calculator - Step 37

2

Can you talk about what you tried and what error messages you got and how you tried to address those?

3 
const getMode = (array) => {
  const counts = {};
  array.forEach(el => counts[el] = (counts[el] || 0) + 1)
  const uniqueCounts = new Set(Object.values(counts));
  if (uniqueCounts.size === 1) {
    return null;
  }

}

this what i tried and the error messages i got was
2. Your if statement should create a new Set and pass the Object.values()of yourcounts object. 3. Your if statement should check if the size property of the new Setis equal to 1. 4. Your
if statement should return null if the size property of the new Set
is equal to1.

4

That’s the only thing you tried? How have you tried to address those error messages?

5 
  const counts = {};

  // Count occurrences of each number in the array
  array.forEach(el => {
    if (counts[el]) {
      counts[el] += 1;  // If the number exists in counts, increment it
    } else {
      counts[el] = 1;   // If the number doesn't exist, initialize it to 1
    }
  });

  // Create a new Set from the Object.values() of counts (for future steps)
  const uniqueCounts = new Set(Object.values(counts));

  return counts; // Returning counts for now
};
6

Hmm, I wouldn’t change any code that was already there

7

how do i reslove the issues tho

8

Hmm, I would start here, as this looks like something you aren’t doing.

In the condition, create a Set with new Set() and pass it the Object.values() of your counts object.

1 Like
9 
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;

const getMedian = (array) => {
  const sorted = array.toSorted((a, b) => a - b);
  const median =
    sorted.length % 2 === 0
      ? getMean([sorted[sorted.length / 2], sorted[sorted.length / 2 - 1]])
      : sorted[Math.floor(sorted.length / 2)];
  return median;
};

const getMode = (array) => {
  const counts = {};
  array.forEach(el => {
    counts[el] = (counts[el] || 0) + 1;
  });
  const uniqueCounts = new Set(Object.values(counts));
  if (uniqueCounts.size === 1) {
    return null; 
  }

  // Find the maximum count
  const maxCount = Math.max(...Object.values(counts));
  // Find all elements that have the maximum count
  const modes = Object.keys(counts).filter(el => counts[el] === maxCount);
  // Return the mode(s)
  return modes.length === 1 ? Number(modes[0]) : modes.map(Number);
};

const calculate = () => {
  const value = document.querySelector("#numbers").value;
  const array = value.split(/,\s*/g);
  const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));

  const mean = getMean(numbers);
  const median = getMedian(numbers);
  const mode = getMode(numbers);

  document.querySelector("#mean").textContent = mean;
  document.querySelector("#median").textContent = median;
  document.querySelector("#mode").textContent = mode === null ? 'No mode' : mode;
};

Sorry, your code does not pass. Don’t give up.

  1. Your if statement should create a new Set and pass the Object.values() of your counts object.
10 
Your if statement should create a new Set and pass the Object.values() of your counts object.

the test is pattern-matching and looking for a set constructor inside the if statement, you need to put that inside the if statement, and not assign it to unique_counts