├── operadores ├── src │ ├── from.js │ ├── fromEvent.js │ ├── of-range.js │ ├── interval-timer.js │ ├── logo.png │ └── index.html └── package.json ├── operadoresPipes ├── src │ ├── map.js │ ├── filter.js │ ├── galeria.js │ ├── pluck-mapTo.js │ ├── take-first-last.js │ ├── logo.png │ ├── img │ │ ├── dos.jpeg │ │ ├── uno.jpeg │ │ ├── cinco.jpeg │ │ ├── cuatro.jpeg │ │ └── tres.jpeg │ ├── styles.css │ ├── galeria.html │ └── index.html └── package.json ├── primerObservable ├── src │ ├── code.js │ ├── logo.png │ └── index.html └── package.json ├── operadoresFinalizado ├── src │ ├── logo.png │ ├── interval-timer.js │ ├── fromEvent.js │ ├── from.js │ ├── of-range.js │ └── index.html └── package.json ├── operadoresPipesFinalizado ├── src │ ├── logo.png │ ├── img │ │ ├── dos.jpeg │ │ ├── uno.jpeg │ │ ├── cinco.jpeg │ │ ├── cuatro.jpeg │ │ └── tres.jpeg │ ├── take-first-last.js │ ├── pluck-mapTo.js │ ├── map.js │ ├── filter.js │ ├── styles.css │ ├── galeria.js │ ├── galeria.html │ └── index.html └── package.json └── primerObservableFinalizado ├── src ├── logo.png ├── code.js └── index.html └── package.json /operadores/src/from.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadores/src/fromEvent.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadores/src/of-range.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadoresPipes/src/map.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /primerObservable/src/code.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadores/src/interval-timer.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadoresPipes/src/filter.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadoresPipes/src/galeria.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadoresPipes/src/pluck-mapTo.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadoresPipes/src/take-first-last.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /operadores/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadores/src/logo.png -------------------------------------------------------------------------------- /operadoresPipes/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipes/src/logo.png -------------------------------------------------------------------------------- /primerObservable/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/primerObservable/src/logo.png -------------------------------------------------------------------------------- /operadoresPipes/src/img/dos.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipes/src/img/dos.jpeg -------------------------------------------------------------------------------- /operadoresPipes/src/img/uno.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipes/src/img/uno.jpeg -------------------------------------------------------------------------------- /operadoresFinalizado/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresFinalizado/src/logo.png -------------------------------------------------------------------------------- /operadoresPipes/src/img/cinco.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipes/src/img/cinco.jpeg -------------------------------------------------------------------------------- /operadoresPipes/src/img/cuatro.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipes/src/img/cuatro.jpeg -------------------------------------------------------------------------------- /operadoresPipes/src/img/tres.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipes/src/img/tres.jpeg -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipesFinalizado/src/logo.png -------------------------------------------------------------------------------- /primerObservableFinalizado/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/primerObservableFinalizado/src/logo.png -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/img/dos.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipesFinalizado/src/img/dos.jpeg -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/img/uno.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipesFinalizado/src/img/uno.jpeg -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/img/cinco.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipesFinalizado/src/img/cinco.jpeg -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/img/cuatro.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipesFinalizado/src/img/cuatro.jpeg -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/img/tres.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-es-cursos/1885-Angular-RxJS-Programacion-Reactiva/master/operadoresPipesFinalizado/src/img/tres.jpeg -------------------------------------------------------------------------------- /operadoresFinalizado/src/interval-timer.js: -------------------------------------------------------------------------------- 1 | import { interval, timer } from "rxjs" 2 | 3 | const observer = { 4 | next: (valor) => console.log("El valor: ", valor), 5 | error: (error) => console.log(error), 6 | complete: () => console.log("Completado") 7 | } 8 | 9 | const source$ = timer(1000) 10 | 11 | source$.subscribe(observer) -------------------------------------------------------------------------------- /operadoresFinalizado/src/fromEvent.js: -------------------------------------------------------------------------------- 1 | import { fromEvent } from "rxjs"; 2 | 3 | const observer = { 4 | next: (valor) => console.log("El valor: ", valor), 5 | error: (error) => console.log(error), 6 | complete: () => console.log("Completado") 7 | } 8 | 9 | const source$ = fromEvent(document, "keyup") 10 | 11 | source$.subscribe(observer) -------------------------------------------------------------------------------- /operadores/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "of-range", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel src/index.html" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel": "^2.7.0", 14 | "rxjs": "^7.5.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /operadoresFinalizado/src/from.js: -------------------------------------------------------------------------------- 1 | import { from } from "rxjs" 2 | 3 | const observer = { 4 | next: (valor) => console.log("El valor: ", valor), 5 | error: (error) => console.log(error), 6 | complete: () => console.log("Completado") 7 | } 8 | 9 | const source$ = from(fetch("https://api.github.com/users/harlandlohora")) 10 | 11 | source$.subscribe(observer) -------------------------------------------------------------------------------- /operadoresPipes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "operadorespipes", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel src/index.html" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel": "^2.7.0", 14 | "rxjs": "^7.5.7" 15 | } 16 | } -------------------------------------------------------------------------------- /primerObservable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "primerobservable", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "code.js", 6 | "scripts": { 7 | "start": "parcel src/index.html" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel": "^2.7.0", 14 | "rxjs": "^7.5.6" 15 | } 16 | } -------------------------------------------------------------------------------- /operadoresFinalizado/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "of-range", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel src/index.html" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel": "^2.7.0", 14 | "rxjs": "^7.5.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /operadoresFinalizado/src/of-range.js: -------------------------------------------------------------------------------- 1 | import { of, range } from "rxjs" 2 | 3 | const observer = { 4 | next: (valor) => console.log("El valor: ", valor), 5 | error: (error) => console.log(error), 6 | complete: () => console.log("Completado") 7 | } 8 | 9 | // const source$ = of(1, 2, 3, 4, 5) 10 | const source$ = range(1, 50) 11 | source$.subscribe(observer) 12 | -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/take-first-last.js: -------------------------------------------------------------------------------- 1 | import { range, take, first, last } from "rxjs" 2 | 3 | const observer = { 4 | next(valor) { 5 | console.log(valor) 6 | }, 7 | complete() { 8 | console.log("Completado") 9 | } 10 | } 11 | 12 | const source$ = range(1, 500) 13 | 14 | source$ 15 | .pipe(last()) 16 | .subscribe(observer) -------------------------------------------------------------------------------- /operadoresPipesFinalizado/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "operadorespipes", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel src/index.html" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel": "^2.7.0", 14 | "rxjs": "^7.5.7" 15 | } 16 | } -------------------------------------------------------------------------------- /primerObservableFinalizado/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "primerobservable", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "code.js", 6 | "scripts": { 7 | "start": "parcel src/index.html" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel": "^2.7.0", 14 | "rxjs": "^7.5.6" 15 | } 16 | } -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/pluck-mapTo.js: -------------------------------------------------------------------------------- 1 | import { pluck, fromEvent, mapTo, map } from "rxjs" 2 | 3 | const observer = { 4 | next(valor) { 5 | console.log("El valor es: ", valor) 6 | }, 7 | error: (error) => { 8 | console.log(error) 9 | } 10 | } 11 | 12 | const source$ = fromEvent(document, "keyup") 13 | 14 | source$ 15 | .pipe(map(() => "Nueva tecla")) 16 | .subscribe(observer) -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/map.js: -------------------------------------------------------------------------------- 1 | import { of, map, fromEvent } from "rxjs" 2 | 3 | const observer = { 4 | next(valor) { 5 | console.log("El valor es: ", valor) 6 | }, 7 | error: (error) => { 8 | console.log(error) 9 | } 10 | } 11 | 12 | // const source$ = of("a", "b", "c") 13 | const source$ = fromEvent(document, "keyup") 14 | 15 | source$ 16 | .pipe(map((valor) => valor.key)) 17 | .subscribe(observer) 18 | -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/filter.js: -------------------------------------------------------------------------------- 1 | import { of, filter, fromEvent, map } from "rxjs" 2 | 3 | const observer = { 4 | next(valor) { 5 | console.log("El valor es: ", valor) 6 | }, 7 | complete() { 8 | console.log("Completado") 9 | } 10 | } 11 | 12 | // const source$ = of(1, 2, 3, 4, 5) 13 | const source$ = fromEvent(document, "keyup") 14 | 15 | source$ 16 | .pipe( 17 | map(valor => valor.key), 18 | filter(tecla => tecla === "Enter") 19 | ) 20 | .subscribe(observer) -------------------------------------------------------------------------------- /operadoresPipes/src/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | width: 100vw; 11 | max-width: 100vw; 12 | box-sizing: border-box; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | } 17 | 18 | h1 { 19 | padding: 15px 0; 20 | } 21 | 22 | img { 23 | width: 50%; 24 | padding-bottom: 15px; 25 | } 26 | 27 | div { 28 | position: fixed; 29 | width: 0%; 30 | top: 0; 31 | height: 6px; 32 | background: #dc239b; 33 | left: 0; 34 | } 35 | -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | width: 100vw; 11 | max-width: 100vw; 12 | box-sizing: border-box; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | } 17 | 18 | h1 { 19 | padding: 15px 0; 20 | } 21 | 22 | img { 23 | width: 50%; 24 | padding-bottom: 15px; 25 | } 26 | 27 | div { 28 | position: fixed; 29 | width: 0%; 30 | top: 0; 31 | height: 6px; 32 | background: #dc239b; 33 | left: 0; 34 | } 35 | -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/galeria.js: -------------------------------------------------------------------------------- 1 | import { fromEvent, map } from "rxjs" 2 | 3 | const progressBar = document.querySelector("div") 4 | 5 | 6 | const observer = { 7 | next(valor) { 8 | progressBar.style.width = valor + "%" 9 | } 10 | } 11 | 12 | const scroll$ = fromEvent(document, 'scroll') 13 | 14 | const calcularPorcentaje = (elemento) => { 15 | const { scrollTop, scrollHeight, clientHeight } = elemento 16 | 17 | return (scrollTop / (scrollHeight - clientHeight)) * 100 18 | } 19 | 20 | scroll$ 21 | .pipe(map((evento) => calcularPorcentaje(evento.target.documentElement))) 22 | .subscribe(observer) 23 | -------------------------------------------------------------------------------- /primerObservableFinalizado/src/code.js: -------------------------------------------------------------------------------- 1 | import { Observable } from "rxjs" 2 | 3 | console.log(Observable) 4 | 5 | const observer = { 6 | next: (valor) => { 7 | console.log("El valor es: ", valor) 8 | }, 9 | error: (error) => { 10 | console.log("El error es: ", error) 11 | }, 12 | complete: () => { 13 | console.log("Observer completado") 14 | } 15 | } 16 | 17 | 18 | const obs$ = new Observable((subscriber) => { 19 | subscriber.next(1) 20 | subscriber.next(2) 21 | subscriber.next({ user: "HarlandLohora", role: "user" }) 22 | //subscriber.error("Este es un error") 23 | setTimeout(() => { 24 | console.log("2 segundos") 25 | }, 2000) 26 | 27 | setTimeout(() => { 28 | console.log("3 segundos") 29 | }, 3000) 30 | subscriber.complete() 31 | }) 32 | console.log("Inicio") 33 | obs$.subscribe(observer) 34 | console.log("Fin") 35 | 36 | -------------------------------------------------------------------------------- /primerObservable/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rxjs 8 | 9 | 27 | 28 | 29 | logo 30 | 31 | 32 | -------------------------------------------------------------------------------- /primerObservableFinalizado/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rxjs 8 | 9 | 27 | 28 | 29 | logo 30 | 31 | 32 | -------------------------------------------------------------------------------- /operadoresPipes/src/galeria.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Galeria 9 | 10 | 11 | 12 |
13 |

Galeria

14 | 15 | Uno 16 | 17 | 18 | Dos 19 | 20 | 21 | Tres 22 | 23 | 24 | Cuatro 25 | 26 | 27 | Cinco 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/galeria.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Galeria 9 | 10 | 11 | 12 |
13 |

Galeria

14 | 15 | Uno 16 | 17 | 18 | Dos 19 | 20 | 21 | Tres 22 | 23 | 24 | Cuatro 25 | 26 | 27 | Cinco 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /operadores/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rxjs 8 | 9 | 27 | 28 | 29 | logo 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /operadoresFinalizado/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rxjs 8 | 9 | 27 | 28 | 29 | logo 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /operadoresPipes/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rxjs 8 | 9 | 27 | 28 | 29 | logo 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /operadoresPipesFinalizado/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rxjs 8 | 9 | 27 | 28 | 29 | logo 30 | 31 | 32 | 33 | 34 | 35 | 36 | --------------------------------------------------------------------------------