workbench

by Huy Le

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>
<input id="searchInput" >
<button id="clearBtn" onclick="clearData()">Clear</button>

<ul id="display">
  
</ul>

JavaScript

console.clear();

const obs = Rx.Observable;
const searchInput = document.getElementById("searchInput");
const clearBtn = document.getElementById("clearBtn");
const ul = document.getElementById("display");

const search = obs
	.fromEvent(searchInput, 'keyup')
	.map(i => i.currentTarget.value)
  .subscribe(console.log);


formatData = r => {
  let test = document.createElement('a');
  let wut = document.createTextNode(r.name);
  test.appendChild(wut);
  test.href = r.html_url;
  test.target = '_blank';
  let li = document.createElement('li');
  li.appendChild(test);
	ul.appendChild(li);
}

clearData = _ => {
	if (ul.firstChild) {
  	ul.removeChild(display.firstChild);
    clearData();
  }
}

const searchParam = obs
	.fromEvent(searchInput, 'keyup')
	.map(i => i.currentTarget.value)
  .debounceTime(750)
  .switchMap(v => obs
  	.fromPromise(fetch(`https://api.github.com/users/${v}`)
    	.then(r => r.json())
      .then(formatData)
      .catch(e => e)
    )
  );

const result = searchParam
	.subscribe();