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.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;
+}
+
+