From 5afded37195c5c34d7b412f588f6df42a5c740b5 Mon Sep 17 00:00:00 2001 From: "jp.dev" Date: Wed, 17 Aug 2022 13:07:52 -0400 Subject: [PATCH] +: consulta a api con javascript --- js_get_data_api/index.html | 97 ++++++++++++++++++++++++++++++++++++++ js_get_data_api/index.js | 28 +++++++++++ js_get_data_api/style.css | 28 +++++++++++ 3 files changed, 153 insertions(+) create mode 100644 js_get_data_api/index.html create mode 100644 js_get_data_api/index.js create mode 100644 js_get_data_api/style.css diff --git a/js_get_data_api/index.html b/js_get_data_api/index.html new file mode 100644 index 0000000..2b3b9c0 --- /dev/null +++ b/js_get_data_api/index.html @@ -0,0 +1,97 @@ + + + + + + + + Rick & Morty + + +

Personajes

+
+ +
+ + + + diff --git a/js_get_data_api/index.js b/js_get_data_api/index.js new file mode 100644 index 0000000..7d83516 --- /dev/null +++ b/js_get_data_api/index.js @@ -0,0 +1,28 @@ +function getCharacters(done) { + const results = fetch("https://rickandmortyapi.com/api/character"); + results + .then(response => response.json()) + .then(data => { + done(data) + }); +} + +getCharacters(data => { + console.log(data); + data.results.forEach(personaje => { + const article = document.createRange().createContextualFragment( + /*html*/` +
+
+ + Personaje + +
+

${personaje.name}

+ ${personaje.status} +
+ `); + const main = document.querySelector("main") + main.append(article) + }); +}); diff --git a/js_get_data_api/style.css b/js_get_data_api/style.css new file mode 100644 index 0000000..c1ab603 --- /dev/null +++ b/js_get_data_api/style.css @@ -0,0 +1,28 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +h1 { + text-align: center; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 18px; +} + +.image-container { + display: flex; +} + +.image-container img { + width: 100%; +} + +article { + padding: 10px; + box-shadow: 0px 0px 1px #0a789d; +}