This is my first time using RxJS (or any observable library). It seems to work okay but I'm not sure about best practices.
The thing that I am most unsure about is subscribing to the observable multiple times. I couldn't decide if it would be better to subscribe to it once with one big function, or to use many smaller subscribers.
Markup
<div class="field">
<label class="label">Password</label>
<div class="control has-icons-left">
<input id="password" class="input" type="password" />
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
<p id="passwordHelp" class="help is-danger"></p>
</div>
<div class="field">
<label class="label">Password Strength</label>
<progress id="passwordStrength" class="progress is-danger" value="0" max="5" />
</div>
Script
const { fromEvent } = rxjs
const { map, filter } = rxjs.operators
document.addEventListener('DOMContentLoaded', () => {
const passwordInput = document.getElementById('password')
const passwordHelp = document.getElementById('passwordHelp')
const passwordStrength = document.getElementById('passwordStrength')
const passwordChanged$ = fromEvent(passwordInput, 'input')
.pipe(
map(x => x.target.value),
map(zxcvbn)
)
passwordChanged$
.pipe(map(password => password.score > 2 ? 'success' : 'danger'))
.subscribe(state => {
passwordInput.className = `input is-${state}`
passwordStrength.className = `progress is-${state}`
})
passwordChanged$
.subscribe(password => { passwordHelp.innerHTML = password.feedback.warning })
passwordChanged$
.subscribe(password => { passwordStrength.setAttribute('value', password.score + 1) })
})