diff --git a/w5_2_FP/data.js b/w5_2_FP/data.js new file mode 100644 index 0000000..6beee9a --- /dev/null +++ b/w5_2_FP/data.js @@ -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' }, +]; diff --git a/w5_2_FP/index.html b/w5_2_FP/index.html new file mode 100644 index 0000000..0056809 --- /dev/null +++ b/w5_2_FP/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/w5_2_FP/index.js b/w5_2_FP/index.js new file mode 100644 index 0000000..4b6a0dd --- /dev/null +++ b/w5_2_FP/index.js @@ -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 +
  • Tom HANKS
    • + +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 += `
  • ${name} ${last}
    • `; +} + +// set the innerHTML of the list element to the generated HTML +document.getElementById('list').innerHTML = html; diff --git a/w5_2_FP/style.css b/w5_2_FP/style.css new file mode 100644 index 0000000..8accfb5 --- /dev/null +++ b/w5_2_FP/style.css @@ -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; +}