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;