feat(curriculum): explain shorthand stat calculator (#55846)

2026-05-28 18:26:54 +00:00 · 2024-10-28 04:40:21 -04:00
parent 4ff1136286
commit cab92b5ca7
26 changed files with 238 additions and 75 deletions
@@ -145,100 +145,104 @@
      "title": "Step 34"
    },
    {
-      "id": "65e62efde0592ec4b4bb6a69",
+      "id": "66f59e667892883f47abe6d5",
      "title": "Step 35"
    },
    {
-      "id": "65f83a7ca7047318e3ccff7c",
+      "id": "65e62efde0592ec4b4bb6a69",
      "title": "Step 36"
    },
    {
-      "id": "6352ea3a5b79e614ee2282fd",
+      "id": "65f83a7ca7047318e3ccff7c",
      "title": "Step 37"
    },
    {
-      "id": "6352ebd3ab962c168a122e85",
+      "id": "6352ea3a5b79e614ee2282fd",
      "title": "Step 38"
    },
    {
-      "id": "6352ec8b9c70fd17b8c7ba3f",
+      "id": "6352ebd3ab962c168a122e85",
      "title": "Step 39"
    },
    {
-      "id": "6352ecef9f045519063da9b3",
+      "id": "6352ec8b9c70fd17b8c7ba3f",
      "title": "Step 40"
    },
    {
-      "id": "6352edee8a4de01ad693f0e4",
+      "id": "6352ecef9f045519063da9b3",
      "title": "Step 41"
    },
    {
-      "id": "6352ee566a59d31d24bde74b",
+      "id": "6352edee8a4de01ad693f0e4",
      "title": "Step 42"
    },
    {
-      "id": "6352f09b1e53a420e7873344",
+      "id": "6352ee566a59d31d24bde74b",
      "title": "Step 43"
    },
    {
-      "id": "6352f179bdca23221298a5ba",
+      "id": "6352f09b1e53a420e7873344",
      "title": "Step 44"
    },
    {
-      "id": "6352f2526dccb523150b64fb",
+      "id": "6352f179bdca23221298a5ba",
      "title": "Step 45"
    },
    {
-      "id": "6352f2a24eb71b24284ca2b6",
+      "id": "6352f2526dccb523150b64fb",
      "title": "Step 46"
    },
    {
-      "id": "6352faf71a9db52631864634",
+      "id": "6352f2a24eb71b24284ca2b6",
      "title": "Step 47"
    },
    {
-      "id": "6352fbb93a91a8272f838d42",
+      "id": "6352faf71a9db52631864634",
      "title": "Step 48"
    },
    {
-      "id": "6352fcb156834128001ea945",
+      "id": "6352fbb93a91a8272f838d42",
      "title": "Step 49"
    },
    {
-      "id": "6352fce75b2d3b2924930f1e",
+      "id": "6352fcb156834128001ea945",
      "title": "Step 50"
    },
    {
-      "id": "6352fe473d53592a40ae403b",
+      "id": "6352fce75b2d3b2924930f1e",
      "title": "Step 51"
    },
    {
-      "id": "6352fed209792d2b89e92ea1",
+      "id": "6352fe473d53592a40ae403b",
      "title": "Step 52"
    },
    {
-      "id": "6352ff27e0e51b2c7dce0010",
+      "id": "6352fed209792d2b89e92ea1",
      "title": "Step 53"
    },
    {
-      "id": "6352ffe4cfafa72d595a0007",
+      "id": "6352ff27e0e51b2c7dce0010",
      "title": "Step 54"
    },
    {
-      "id": "6353004b235d7a2e0b913f2b",
+      "id": "6352ffe4cfafa72d595a0007",
      "title": "Step 55"
    },
    {
-      "id": "6353024f5eab012fa2f57eec",
+      "id": "6353004b235d7a2e0b913f2b",
      "title": "Step 56"
    },
    {
-      "id": "6353028147d3c7309017216a",
+      "id": "6353024f5eab012fa2f57eec",
      "title": "Step 57"
    },
    {
-      "id": "635302be760d6031d11a06cd",
+      "id": "6353028147d3c7309017216a",
      "title": "Step 58"
+    },
+    {
+      "id": "635302be760d6031d11a06cd",
+      "title": "Step 59"
    }
  ]
 }
@@ -1,8 +1,8 @@
 ---
 id: 6352ea3a5b79e614ee2282fd
-title: Step 37
+title: Step 38
 challengeType: 0
-dashedName: step-37
+dashedName: step-38
 ---

 # --description--
@@ -141,7 +141,7 @@ const getMedian = (array) => {
 --fcc-editable-region--
 const getMode = (array) => {
  const counts = {};
-  array.forEach(el => counts[el] = (counts[el] || 0) + 1)
+  array.forEach(el => counts[el] = counts[el] ? counts[el] + 1 : 1);
 }
 --fcc-editable-region--

@@ -1,8 +1,8 @@
 ---
 id: 6352ebd3ab962c168a122e85
-title: Step 38
+title: Step 39
 challengeType: 0
-dashedName: step-38
+dashedName: step-39
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352ec8b9c70fd17b8c7ba3f
-title: Step 39
+title: Step 40
 challengeType: 0
-dashedName: step-39
+dashedName: step-40
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352ecef9f045519063da9b3
-title: Step 40
+title: Step 41
 challengeType: 0
-dashedName: step-40
+dashedName: step-41
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352edee8a4de01ad693f0e4
-title: Step 41
+title: Step 42
 challengeType: 0
-dashedName: step-41
+dashedName: step-42
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352ee566a59d31d24bde74b
-title: Step 42
+title: Step 43
 challengeType: 0
-dashedName: step-42
+dashedName: step-43
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352f09b1e53a420e7873344
-title: Step 43
+title: Step 44
 challengeType: 0
-dashedName: step-43
+dashedName: step-44
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352f179bdca23221298a5ba
-title: Step 44
+title: Step 45
 challengeType: 0
-dashedName: step-44
+dashedName: step-45
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352f2526dccb523150b64fb
-title: Step 45
+title: Step 46
 challengeType: 0
-dashedName: step-45
+dashedName: step-46
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352f2a24eb71b24284ca2b6
-title: Step 46
+title: Step 47
 challengeType: 0
-dashedName: step-46
+dashedName: step-47
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352faf71a9db52631864634
-title: Step 47
+title: Step 48
 challengeType: 0
-dashedName: step-47
+dashedName: step-48
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352fbb93a91a8272f838d42
-title: Step 48
+title: Step 49
 challengeType: 0
-dashedName: step-48
+dashedName: step-49
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352fcb156834128001ea945
-title: Step 49
+title: Step 50
 challengeType: 0
-dashedName: step-49
+dashedName: step-50
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352fce75b2d3b2924930f1e
-title: Step 50
+title: Step 51
 challengeType: 0
-dashedName: step-50
+dashedName: step-51
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352fe473d53592a40ae403b
-title: Step 51
+title: Step 52
 challengeType: 0
-dashedName: step-51
+dashedName: step-52
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352fed209792d2b89e92ea1
-title: Step 52
+title: Step 53
 challengeType: 0
-dashedName: step-52
+dashedName: step-53
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352ff27e0e51b2c7dce0010
-title: Step 53
+title: Step 54
 challengeType: 0
-dashedName: step-53
+dashedName: step-54
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6352ffe4cfafa72d595a0007
-title: Step 54
+title: Step 55
 challengeType: 0
-dashedName: step-54
+dashedName: step-55
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6353004b235d7a2e0b913f2b
-title: Step 55
+title: Step 56
 challengeType: 0
-dashedName: step-55
+dashedName: step-56
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6353024f5eab012fa2f57eec
-title: Step 56
+title: Step 57
 challengeType: 0
-dashedName: step-56
+dashedName: step-57
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6353028147d3c7309017216a
-title: Step 57
+title: Step 58
 challengeType: 0
-dashedName: step-57
+dashedName: step-58
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 635302be760d6031d11a06cd
-title: Step 58
+title: Step 59
 challengeType: 0
-dashedName: step-58
+dashedName: step-59
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 65e62efde0592ec4b4bb6a69
-title: Step 35
+title: Step 36
 challengeType: 0
-dashedName: step-35
+dashedName: step-36
 ---

 # --description--
@@ -119,7 +119,7 @@ const getMedian = (array) => {

 const getMode = (array) => {
  const counts = {};
-  array.forEach(el => counts[el] = (counts[el] || 0) + 1)
+  array.forEach(el => counts[el] = counts[el] ? counts[el] + 1 : 1);
  console.log(counts)
  return counts;
 }
@@ -1,8 +1,8 @@
 ---
 id: 65f83a7ca7047318e3ccff7c
-title: Step 36
+title: Step 37
 challengeType: 0
-dashedName: step-36
+dashedName: step-37
 ---

 # --description--
@@ -119,7 +119,7 @@ const getMedian = (array) => {
 --fcc-editable-region--
 const getMode = (array) => {
  const counts = {};
-  array.forEach(el => counts[el] = (counts[el] || 0) + 1)
+  array.forEach(el => counts[el] = counts[el] ? counts[el] + 1 : 1);
  console.log(counts)
  return counts;
 }
@@ -0,0 +1,159 @@
+---
+id: 66f59e667892883f47abe6d5
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+There is another way to write the `forEach`. Instead of using a block body `() => {}` for the callback, you can use an expression body `() =>`.
+
+You will have to convert the `if...else` statements into an expression. Write the expression as a ternary and use a single assignment for the ternary.
+
+```js
+assignment = condition ? exprIfTrue : exprIfFalse
+```
+
+Convert the `forEach` callback to use an expression body and replace the statements with a ternary.
+
+# --hints--
+
+Your function should still increment the `counts` variable properly. 
+
+```js
+const expected = {'2': 1, '4': 2, '5': 1};
+assert.deepEqual(getMode([4, 4, 2, 5]), expected)
+```
+
+Your function should use a `ternary` operator. 
+
+```js
+assert.match(getMode.toString(), /counts\[el\]\s*=\s*counts\[el\]\s*\?\s*counts\[el\]\s*\+\s*1\s*\:\s*1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```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>
+```
+
+```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;
+}
+```
+
+```js
+const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;
+
+const getMedian = (array) => {
+  const sorted = array.sort((a, b) => a - b);
+  const median =
+    array.length % 2 === 0
+      ? getMean([sorted[array.length / 2], sorted[array.length / 2 - 1]])
+      : sorted[Math.floor(array.length / 2)];
+  return median;
+}
+
+--fcc-editable-region--
+const getMode = (array) => {
+  const counts = {};
+  array.forEach(el => {
+    if (counts[el]) {
+      counts[el] += 1;
+    } else {
+      counts[el] = 1;
+    }
+  });
+  return counts;
+}
+--fcc-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);
+  console.log(getMode(numbers));
+
+  document.querySelector("#mean").textContent = mean;
+  document.querySelector("#median").textContent = median;
+}
+```