gndx · AGCGUAMAN · Jun 8, 2020 · Jun 11, 2020
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "cSpell.words": [
+    "Personaje",
+    "Personajes",
+    "xhttp",
+    "xmlhttprequest"
+  ]
+}
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -1,13 +1,13 @@
 ## DESCRIPTION
 
 Nombre:
-Usuario Platzi:
+Usuario Platzi: Alexander Guamán Cruz
 
 ## Ciudad
 - [ ] Ciudad de México
-- [ ] Bogotá
+- [x] Bogotá
 
 # Retos:
-  - [ ] Primer problema
-  - [ ] Segundo problema
-  - [ ] Tercer problema
+  - [x] Primer problema
+  - [x] Segundo problema
+  - [x] Tercer problema
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Reto 3 Septiembre 14: Curso de Fundamentos de JavaScript",
   "main": "index.js",
   "scripts": {
-    "start": "node src/index.js"
+    "start": "src/index.js"
   },
   "repository": {
     "type": "git",
@@ -23,5 +23,6 @@
   "homepage": "https://github.com/platzi/escuelajs-reto-03#readme",
   "dependencies": {
     "xmlhttprequest": "^1.8.0"
+  },
+  "collaborator": "Alexander Guamán Cruz <alexander.guaman.cruz@gmail.com>"
   }
-}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>javascript-challenge</title>
+  </head>
+  <body>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,32 +1,40 @@
-var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
 
-var API = 'https://rickandmortyapi.com/api/character/';
-var xhttp = new XMLHttpRequest();
+const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest
 
-function fetchData(url_api, callback) {
-  xhttp.onreadystatechange = function (event) {
-    if (xhttp.readyState === '4') {
-      if (xhttp.status == 200)
-        callback(null, xhttp.responseText);
-      else return callback(url_api);
+const API = 'https://rickandmortyapi.com/api/character/'
+const xhttp = new XMLHttpRequest()
+
+const fetchData = url_api => {
+  xhttp.open('GET', url_api, false)
+  xhttp.responseType = 'json'
+  return new Promise((response, reject) => {
+    xhttp.onreadystatechange = () => {
+      if (xhttp.readyState === 4) {
+        if (xhttp.status === 200) {
+          const res = JSON.parse(xhttp.responseText)
+          return response(res)
+        } else {
+          return reject(new Error('Error has ocurred!'))
+        }
+      }
     }
-  };
-  xhttp.open('GET', url_api, false);
-  xhttp.send();
-};
+    xhttp.send()
+  })
+}
+
+const getData = async url => {
+  try {
+    const first = await fetchData(url)
+    const second = await fetchData(`${API}${first.results[0].id}`)
+    const third = await fetchData(second.origin.url)
+
+    console.log(`Personajes: ${first.info.count}`)
+    console.log(`Primer Personaje: ${second.name}`)
+    console.log(`Dimensión: ${third.dimension}`)
+
+  } catch (error) {
+    console.log(error)
+  }
+}
 
-fetchData(API, function (error1, data1) {
-  if (error1) return console.error('Error' + ' ' + error1);
-  console.log('Primer Llamado...')
-  fetchData(API + data1.results[0].id, function (error2, data2) {
-    if (error2) return console.error(error1);
-    console.log('Segundo Llamado...')
-    fetchData(data2.origin.url, function (error3, data3) {
-      if (error3) return console.error(error3);
-      console.log('Tercero Llamado...')
-      console.log('Personajes:' + ' ' + data1.info.count);
-      console.log('Primer Personaje:' + ' ' + data2.name);
-      console.log('Dimensión:' + ' ' + data3.dimension);
-    });
-  });
-});
+getData(API)