Exercise 6.1

2026-04-05 18:49:32 +09:00
parent d8cdc977e6
commit bd53e91476
3 changed files with 79 additions and 0 deletions
--- a/w6_1_FP/index.html
+++ b/w6_1_FP/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+</head>
+
+<body>
+
+    <div>
+        <button id="sort-by-name">Sort by Name</button>
+        <button id="sort-by-last">Sort by Last Name</button>
+        <button id="sort-by-age">Sort by Age</button>
+    </div>
+    <ul id="people-list"></ul>
+
+    <script defer src="index.js"></script>
+</body>
+
+</html>
--- a/w6_1_FP/index.js
+++ b/w6_1_FP/index.js
@@ -0,0 +1,51 @@
+const people = [
+  { name: 'Bob', last: 'Johnson', age: 30 },
+  { name: 'Charlie', last: 'Brown', age: 25 },
+  { name: 'David', last: 'Williams', age: 35 },
+  { name: 'Alice', last: 'Smith', age: 28 },
+  { name: 'Eve', last: 'Davis', age: 22 },
+  { name: 'Frank', last: 'Miller', age: 40 },
+];
+
+const buttonName = document.getElementById('sort-by-name');
+const buttonLast = document.getElementById('sort-by-last');
+const buttonAge = document.getElementById('sort-by-age');
+
+// Helpers
+const pipe =
+  (...functions) =>
+  (value) => {
+    return functions.reduce((acc, fn) => fn(acc), value);
+  };
+
+const render = (listItems) => {
+  const ul = document.getElementById('people-list');
+  ul.innerHTML = listItems.join('');
+};
+
+// Exercise helpers
+
+const peopleToString = (people) => {
+  return people.map((p) => `${p.name} ${p.last} (${p.age})`);
+};
+
+const peopleToListItems = (strings) => strings.map((str) => `<li>${str}</li>`);
+
+const compareByName = (a, b) => a.name.localeCompare(b.name);
+const compareByLast = (a, b) => a.last.localeCompare(b.last);
+const compareByAge = (a, b) => a.age - b.age;
+
+const sortPeopleBy = /* ... PLACEHOLDER ... */ () => {};
+
+// Main
+
+const byname = /* ... PLACEHOLDER ... */ undefined;
+
+const bylast = /* ... PLACEHOLDER ... */ undefined;
+
+const byage = /* ... PLACEHOLDER ... */ undefined;
+
+byname(people);
+buttonName.addEventListener('click', () => undefined);
+buttonLast.addEventListener('click', () => undefined);
+buttonAge.addEventListener('click', () => undefined);