diff --git a/01 Non blocking/src/js/main.js b/01 Non blocking/src/js/main.js index 357fbfa..36de22f 100644 --- a/01 Non blocking/src/js/main.js +++ b/01 Non blocking/src/js/main.js @@ -1,9 +1,6 @@ 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(); @@ -11,41 +8,50 @@ document.onreadystatechange = () => { 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'); }; } diff --git a/01 Non blocking/src/js/mapper.js b/01 Non blocking/src/js/mapper.js index 2d702ed..a8992c9 100644 --- a/01 Non blocking/src/js/mapper.js +++ b/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) diff --git a/10 Event listeners are sync/README.md b/10 Event listeners are sync/README.md index dca30e5..824cb20 100644 --- a/10 Event listeners are sync/README.md +++ b/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 - + @@ -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.