Mavimarmara/README.md

## README.md

      
    Raw
  

              README.md
            
          
    client-side-api-web-request

🇧🇷 Prova de conceito (POC) de como é feita uma requisição à uma API em client side. A ideia deste repositório é fazer a demonstração de uma requisição client side da sua forma mais simples, por isso qualquer framework ou tecnologia para tornar o código mais bonito foi dispensado.
Documentação da API utilizada:
The Space Devs: Launch List

🇺🇸 Proof of concept (POC) of how an API request is made in client side. The idea of this repository is to demonstrate a client side request in its simplest form, so any framework or technology to make the code more beautiful was dispensed with.
API documentation used:
The Space Devs: Launch List

🇪🇦 Prueba de concepto (POC) de cómo se realiza una solicitud de API en el lado del cliente. La idea de este repositorio es demostrar una solicitud del lado del cliente en su forma más simple, por lo que se prescindió de cualquier marco o tecnología para embellecer el código.
Documentación de la API utilizada
The Space Devs: Launch List

Materiais de Apoio / Support Materials / Materiales de apoyo

Mozilla: Introduction to web APIs
Github: Public APIs

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Launches</title>
  </head>
  <body>
    <script>
        var requestURL = 'https://ll.thespacedevs.com/2.2.0/launch/?format=json&limit=10&offset=10';
        var request = new XMLHttpRequest();
        request.open('GET', requestURL);
        request.responseType = 'json';
        request.send();

        request.onload = function() {
            var response = request.response;
            build(response);
        }

        function build(jsonObj) {
            var launches = jsonObj['results'];

            for(i = 0; i < launches.length; i++) {
                var launch = document.createElement('launch');
                var title = document.createElement('h1');
                var description = document.createElement('p');
                var body = document.querySelector('body');

                title.textContent = launches[i].name;
                description.textContent = `
                Last Updated: ${launches[i].last_updated}
                Latitude: ${launches[i].pad.latitude}
                Longitude: ${launches[i].pad.longitude}
                `

                launch.appendChild(title);
                launch.appendChild(description);
                body.appendChild(launch);
            }
        }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Space Launches</title>
	</head>
	<body>
	<script>
	var requestURL = 'https://ll.thespacedevs.com/2.2.0/launch/?format=json&limit=10&offset=10';
	var request = new XMLHttpRequest();
	request.open('GET', requestURL);
	request.responseType = 'json';
	request.send();

	request.onload = function() {
	var response = request.response;
	build(response);
	}

	function build(jsonObj) {
	var launches = jsonObj['results'];

	for(i = 0; i < launches.length; i++) {
	var launch = document.createElement('launch');
	var title = document.createElement('h1');
	var description = document.createElement('p');
	var body = document.querySelector('body');

	title.textContent = launches[i].name;
	description.textContent = `
	Last Updated: ${launches[i].last_updated}
	Latitude: ${launches[i].pad.latitude}
	Longitude: ${launches[i].pad.longitude}
	`

	launch.appendChild(title);
	launch.appendChild(description);
	body.appendChild(launch);
	}
	}
	</script>
	</body>
	</html>