andrea/exercises
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5.2_exercise

Browse Source
This commit is contained in:
Andrea Bianchi
2026-03-31 14:59:47 +09:00
parent baa0d8559f
commit bd1954bc3b
4 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
w5_2_FP/data.js Normal file
View File

@@ -0,0 +1,22 @@
export const data = [
{ name: 'tom', last: 'hanks' },
{ name: 'meryl', last: 'streep' },
{ name: 'leonardo', last: 'dicaprio' },
{ name: 'scarlett', last: 'johansson' },
{ name: 'brad', last: 'pitt' },
{ name: 'angelina', last: 'jolie' },
{ name: 'denzel', last: 'washington' },
{ name: 'jennifer', last: 'lawrence' },
{ name: 'robert', last: 'downey jr.' },
{ name: 'natalie', last: 'portman' },
{ name: 'morgan', last: 'freeman' },
{ name: 'emma', last: 'stone' },
{ name: 'johnny', last: 'depp' },
{ name: 'anne', last: 'hathaway' },
{ name: 'will', last: 'smith' },
{ name: 'charlize', last: 'theron' },
{ name: 'matt', last: 'damon' },
{ name: 'julia', last: 'roberts' },
{ name: 'christian', last: 'bale' },
{ name: 'cate', last: 'blanchett' },
];

22
w5_2_FP/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta charset="utf-8" />
</head>
<body>
<ul id="list">
<li><span class="blue">Christian</span> <span class="pink">BALE</span></li>
<li><span class="blue">Cate</span> <span class="pink">BLANCHETT</span></li>
<!-- ... -->
</ul>
<script defer type="module" src="solution-index.js"></script>
</body>
</html>

35
w5_2_FP/index.js Normal file
View File

@@ -0,0 +1,35 @@
import { data } from './data.js';
// Utility function to compose functions
const pipe =
(...fns) =>
(x) =>
fns.reduce((v, f) => f(v), x);
/*
Given
{ name: 'tom', last: 'hanks' },
transform it to
<li><span class="blue">Tom</span> <span class="pink">HANKS</span></li>
Sort all the actors by their lastname.
*/
// Transfor the following code with loops to use functional programming style
// Sort by lastname
data.sort((a, b) => a.last.localeCompare(b.last));
// Create HTML list items
let html = '';
// For each actor
for (const actor of data) {
const name = actor.name[0].toUpperCase() + actor.name.slice(1);
const last = actor.last.toUpperCase();
html += `<li><span class="blue">${name}</span> <span class="pink">${last}</span></li>`;
}
// set the innerHTML of the list element to the generated HTML
document.getElementById('list').innerHTML = html;

21
w5_2_FP/style.css Normal file
View File

@@ -0,0 +1,21 @@
body {
width: 600px;
}
ol {
text-align: left;
}
li {
list-style: circle;
}
.blue {
color: dodgerblue;
font-style: italic;
}
.pink {
color: fuchsia;
font-weight: bold;
}