﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Mi familia</title>

    <link rel="stylesheet" href="style.css">
  </head>

  <body>

      <header>
        
      </header>

      <section>
          <h3>Miembros de la familia, nombres:</h3>
          <p id="nombres">
          </p>

          <h3>Edad de cada uno:</h3>
          <p id="edades">
          </p>

          <h3>Tiene trabajo:</h3>
          <p id="trabajos">
          </p>

          <h3>Edades:</h3>
          <p id="fechas">
          </p>
      </section>

    <script>
    const header = document.querySelector('header');
    const section = document.querySelector('section');

    const url = 'https://santisnow.github.io/repositorio-json-pruebas/personas.json';
    const request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'json';
    request.send();


    request.onload = () => {
      //console.log("Respuesta exitosa del servidor");
      const response = request.response;
      //console.log(response);
      
      
      //obtenerTitulo(response);
      
      mostrarDatos(response);
      
    }

    function mostrarDatos(jsonObj) {
      const miH1 = document.createElement('h1');
      miH1.textContent = jsonObj['Personas'];
      header.appendChild(miH1);

      const miembros = jsonObj['Lista'];
      
      for(i in miembros){
        console.log(miembros[i].Nombre);

        if(i != 4){
          document.getElementById("nombres").innerHTML += miembros[i].Nombre + ", ";
        }
        else{
          document.getElementById("nombres").innerHTML += miembros[i].Nombre + ".";
        }

        if(i != 4){
          document.getElementById("edades").innerHTML += miembros[i].Edad + ", ";
        }
        else{
          document.getElementById("edades").innerHTML += miembros[i].Edad + ". ";
        }

        if(miembros[i].Trabajo == true){
          document.getElementById("trabajos").innerHTML += miembros[i].Nombre + " tiene trabajo.<br />";
        }
        else{
          document.getElementById("trabajos").innerHTML += miembros[i].Nombre + " no tiene trabajo.<br />";
        }

        document.getElementById("fechas").innerHTML += miembros[i].Nombre + " nació el: " + miembros[i].Nacimiento + "<br />";
        
      }    
    }

    </script>
  </body>
</html>

//------------ARCHIVO DE ESTILOS--------------------------//


body {
    width: 800px;
    margin: 0 auto;
  }
  h1 {
    font-size: 4rem;
    text-align: center;
  }
  section article {
    width: 33%;
    float: left;
  }
  section p {
    margin: 5px 0;
  }