app.ts

window.onloadstart = eventLoadStart;
window.onloadend = eventOnLoad;

interface Person {
  name: string;
  password: string;
  email: string;
}

function eventLoadStart() {
  if(localStorage.length == 0) {
    const persons: Person[] = [];
    localStorage.setItem('data', JSON.stringify(persons));
  }
}

function eventOnLoad() {
  app();
}

function app() {
  const persons: Person[] = load();
  const lista: HTMLElement = document.getElementById("lista");
  lista.innerHTML = convertPersonsToHTML(persons);
}

function load(): Person[] {
  const data: string = localStorage.getItem('data');
  return parsePersons(data);
}

function pushLocal(person: Person) {
  let persons: Person[] = parsePersons(localStorage.getItem('data'));
  if(!persons) {
    persons = [];
  }
  persons.push(person);
  localStorage.setItem('data', JSON.stringify(persons));
}

function parsePersons(json: string): Person[] {
  let persons: Person[];
  const data: any = JSON.parse(json);
  persons = data as Person[];
  return persons;
}

function formReset() {
  console.log('Reset!');
}

function formSubmit() {
  const formData: Person = {
    name: (document.getElementById("name") as HTMLInputElement).value,
    password: (document.getElementById("password") as HTMLInputElement).value,
    email: (document.getElementById("email") as HTMLInputElement).value,
  };
  pushLocal(formData);
  app();
}

function seeMore() {
  const email: string = "marcos@huck.com.ar";
  const persons: Person[] = load();
  const person: Person = persons.find(person => (person.email === email));
  const details: HTMLElement = document.getElementById("detalles");
  details.innerHTML = convertPersonToHTML(person);
}

function convertPersonToHTML(person: Person): string {
  let html: string = "<ul>";
  for(let key in person) {
    html += `<li>${key.toUpperCase()}: ${person[key]}</li>`;
  }
  html += "</ul>";
  return html;
}

function convertPersonsToHTML(persons: Person[]): string {
  let html: string = "<ul>";
  for(let item of persons) {
    html += `<li>${item.name} <button onclick="seeMore()">Ver más</button></li>`;
  }
  html += "</ul>";
  return html;
}