Finalización del Proyecto PlatziWordle

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:10

Finalización del Proyecto PlatziWordle

Curso de Programación Reactiva con RxJS

Clase 14 de 36

Clase 14 / 36

// Posterior a validar la tecla enter
messageText.textContent = ''

// Informar las letras que faltan
if (userAnswers.length !== 5) {
	messageText.textContent = `¡Hacen falta ${5 - userAnswers.length} letras!`
	return;
}

// Si la respuesta es correcta, usar el Subject (no requiere iterar)
if(userAnswers.join('') === correctWord) {
	userWinOrLoose$.next();
	return;
}

// Si la respuesta no es correcta, verificar cada letra
const letterBox = [...letterRows[letterRowIndex].children]
userAnswers.forEach((value, index) => {
	const letterStatus = correctWord.indexOf(value)
	letterBox[index].classList.add(
`letter-${ ( letterStatus === -1 ? 'grey' : ( index === letterStatus ? 'green' : 'yellow') ) }`
	)
})

letterRowIndex++;
userAnswers = [];
letterColumnIndex = 0;

const getAllIndexOf = (word, character) => {
    let letterIndex = []
    let currentIndex = -1
    do {
        currentIndex = word.indexOf(character, currentIndex+1)
        currentIndex !== -1 && letterIndex.push(currentIndex)
    } while (currentIndex !== -1)
    return !letterIndex.length ? -1 : letterIndex
}

// Si la respuesta no es correcta, verificar cada letra
const letterBox = [...letterRows[letterRowIndex].children]
userAnswers.forEach((value, index) => {
		const letterStatus = getAllIndexOf(correctWord, value)
		letterBox[index].classList.add(
				`letter-${
					( letterStatus === -1 ? 'grey' :
						( letterStatus.includes(index) ? 'green' : 'yellow')
					)
				}`
		)
})

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS

Finalización del Proyecto PlatziWordle