JavaScript Ya

Problemas
Codificar problema
Ejecución problema

PROBLEMAS

Mediante la dirección web:
```
https://freegeoip.app/json/
```
freegeoip.app nos proporciona una API de geolocalización IP. Utiliza una base de datos de direcciones IP asociadas a ciudades junto con otra información relevante como zona horaria, latitud y longitud.

La estructura del archivo JSON es:
```
{
  "ip":"186.123.122.56",
  "country_code":"AR",
  "country_name":"Argentina",
  "region_code":"X",
  "region_name":"Córdoba",
  "city":"Córdoba",
  "zip_code":"5000",
  "time_zone":"America/Argentina/Cordoba",
  "latitude":-31.4015,
  "longitude":-64.1803,
  "metro_code":0}
```
Mostrar en la página el nombre del país, ciudad, código postal e ip.

Mediante la dirección web:

https://jsonplaceholder.typicode.com/users?id=[número de 1 a 10]

Recuperamos los datos de un usuario en particular. Ingresar en un formulario el id de un usuario y al presionar un botón mostrar los datos del mismo.

La estructura del archivo JSON es:

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }
]

Solución

Problema 1.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>
    <div id="informacion">

    </div>

    <script>
        fetch("https://freegeoip.app/json/")
            .then(response => response.json())
            .then(datos => {
                document.getElementById("informacion").innerHTML =
                    `<p>Pais:${datos.country_name}</p>
             <p>Ciudad:${datos.city}</p>
             <p>Código postal:${datos.zip_code}</p>
             <p>Ip:${datos.ip}</p>`;
            });
    </script>

</body>

</html>



Problema 2.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>
    <p>Ingrese el id de un usuario(entre 1 y 10):
        <input type="number" id="usuario">
    </p>
    <p><button id="buscar">Buscar</button></p>
    <div id="informacion">

    </div>

    <script>

        document.getElementById("buscar").addEventListener("click", () => {
            fetch("https://jsonplaceholder.typicode.com/users?id=" + document.getElementById("usuario").value)
                .then(response => response.json())
                .then(datos => {
                    if (datos.length == 1)
                        document.getElementById("informacion").innerHTML =
                            `<p>Nombre:${datos[0].name}</p>
                             <p>Ciudad:${datos[0].email}</p>
                             <p>Teléfono:${datos[0].phone}</p>`;
                    else
                        document.getElementById("informacion").innerHTML = 'No existe el usuario con id=' +
                            document.getElementById("usuario").value;
                });
        });

    </script>

</body>

</html>

ES6 - API fetch (consumir API públicas)

Retornar al menu