JSFiddle - React, Tailwind, and code Playground

by steen_hansen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.5.5/rxjs.umd.js"></script>

JavaScript

//console.log('rxjs', rxjs.fromEvent)
 
// Setup: Add two inputs to the page
const user_input = document.createElement('input');
document.body.appendChild(user_input);
const pass_input = document.createElement('input');
document.body.appendChild(pass_input);
const login_button = document.createElement('button');
login_button.innerHTML = 'Log-In';
login_button.disabled = true;
document.body.appendChild(login_button);

// Get streams of changes
const userChanges$ = rxjs.fromEvent(user_input, 'input');
const passChanges$ = rxjs.fromEvent(pass_input, 'input');
 
// Combine the changes by adding them together
userChanges$.pipe(
  rxjs.combineLatestWith(passChanges$),
  rxjs.map(([e_user, e_pass]) => [(e_user.target).value, (e_pass.target).value]),
  rxjs.map(([user_text, pass_text]) => user_text.length===0 || pass_text.length===0)
)
.subscribe(empty_user_or_pass=> login_button.disabled = empty_user_or_pass);

const loginClick$ = rxjs.fromEvent(login_button, 'click');

//const aa = rxjs.ajax.ajax;
//console.log('aa', aa)

//loginClick$.pipe(
/*  const uuu =  aa({url: 'https://api.github.com/users?per_page=5', 
                   method:'GET',
                   headers: {
    'Content-Type': 'application/json',
             } } ).
  pipe( rxjs.tap(x=>console.log(x))) */
//)
//.subscribe(x=> console.log( x));