Máster Lemoncode / Solution to the async-javascript exercise

01 Non blocking/src/js/main.js

@@ -1,51 +1,57 @@
 document.onreadystatechange = () => {
     const load = () => {
         const search_button = document.getElementById('search_button');
-        const service = new apiIceAndFire.Service();
-        const printer = new printService.Printer();
-        const apiMapper = mapper.apiMapper();
 
         search_button.addEventListener('click', (event) => {
             event.stopPropagation();
             const houseInput = document.getElementById('input-house');
             const characterInput = document.getElementById('input-character');
 
             if (houseInput.value && characterInput.value) {
-                console.log('1');
-                const housesRequestConfig = {
-                    err: handleError,
-                    callback: handleHousesRequestSucces(apiMapper, printer)
-                };
-                service.getHousesByName(houseInput.value, housesRequestConfig);
-                console.log('2');
-                const charactersRequestConfig = {
-                    err: handleError,
-                    callback: handleCharactersRequestSuccess(apiMapper, printer)
-                };
-                service.getCharactersByName(characterInput.value, charactersRequestConfig);
-                console.log('3');
+                getHouseBeforeCharacter(houseInput.value, characterInput.value);
             } else {
                 alert('Introduce a values')
             }
         });
     };
 
+    const service = new apiIceAndFire.Service();
+    const printer = new printService.Printer();
+    const apiMapper = mapper.apiMapper();
+
+    function getCharacter(character) {
+        const charactersRequestConfig = {
+            err: handleError,
+            callback: handleCharactersRequestSuccess(apiMapper, printer)
+        };
+        service.getCharactersByName(character, charactersRequestConfig);
+    }
+
+    function getHouseBeforeCharacter(house, character) {
+        const housesRequestConfig = {
+            err: handleError,
+            callback: handleHousesRequestSuccess(apiMapper, printer, character)
+        };
+        service.getHousesByName(house, housesRequestConfig);
+    }
+
     function handleError() {
         console.log(JSON.parse(this.responseText));
     };
 
-    function handleHousesRequestSucces(apiMapper, printer) {
+    function handleHousesRequestSuccess(apiMapper, printer, character) {
         return function () {
             const data = JSON.parse(this.responseText);
             const houses = apiMapper.housesMap(data);
             printer.printHouses(houses, 'houses');
+            getCharacter(character);
         };
     };
 
     function handleCharactersRequestSuccess(apiMapper, printer) {
         return function () {
             const data = JSON.parse(this.responseText);
-            const characters = apiMapper.caracthersMap(data);
+            const characters = apiMapper.charactersMap(data);
             printer.printCharacters(characters, 'characters');
         };
     }

01 Non blocking/src/js/mapper.js

@@ -11,7 +11,7 @@ var mapper = mapper || {};
             }))
         );
 
-        const caracthersMap = (characters) => (
+        const charactersMap = (characters) => (
             characters.map(c => ({
                 name: c.name,
                 born: c.born,
@@ -21,7 +21,7 @@ var mapper = mapper || {};
 
         return {
             housesMap,
-            caracthersMap
+            charactersMap
         }
     };
 })(mapper)

10 Event listeners are sync/README.md

@@ -1,6 +1,8 @@
-## In this demo we are going to work with Event Listeners.
+# In this demo we are going to work with Event Listeners
+
 * Folder structure:
 
+```bash
 10 Web Workers/
 ├── src/
 │   ├── content/
@@ -10,15 +12,16 @@
 │   ├── index.html
 ├── gulpfile.js
 ├── package.json
+```
 
 * Start from previous code demo.
 
-## Steps.
+## Steps
 
-### 1. Refactor the `index.html` for our demo.
+### 1. Refactor the `index.html` for our demo
 
 ```diff html
-<!doctype html>
+<!DOCTYPE html>
 
 <html lang="en">
 <head>
@@ -40,7 +43,7 @@
 
 ```
 
-### 2. Lets change our `site.css`, for this demo. 
+### 2. Lets change our `site.css`, for this demo
 
 ```diff site.css
 @import url('https://fonts.googleapis.com/css?family=Raleway');
@@ -91,9 +94,12 @@ body {
 -}
 -
 ```
+
 ### 3. Now we can add `main.js`
 
-```javascript main.js
+```javascript
+main.js
+
 (function () {
   const btn = document.getElementById('btn');
 
@@ -113,8 +119,18 @@ body {
 })();
 
 ```
-### Challanege -> ¿Cuantos programas pequeños tenemos aquí? // 2
-###¿Y cuando lo ejecutemos que se verá en la consola? // pre-click click-1 click-2 post-click
+
+### Challenge -> ¿Cuántos programas pequeños tenemos aquí?
+
+```javascript
+// 2
+```
+
+### ¿Y cuándo lo ejecutemos que se verá en la consola? 
+
+```javascript
+// pre-click click-1 click-2 post-click
+```
 
 * Lo normal es tender a pensar que hubiera 3 o 4 pequeños programas. Habría 4, si los EventListeners fueran disparados de manera asíncrona, pero los EventListeners son disparados de forma síncrona.