<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RxJS Demo</title>
<style>
body { font-family: 'Arial'; background: white; text-align: center;}
#container { width: 40%; min-width: 340px; display: inline-block;}
.search-bar { padding: 10px; background-color: white; border-bottom: 1px solid lightgray; margin-bottom: 30px;}
#textfield { width: 100%; height: 20px; font-size: 20px; border: 1px solid #DDDDDD; border-radius: 4px; color: #333333; padding: 5px;}
ul { list-style-type: none; padding: 0px; }
li { background: white; padding: 30px 10px; margin-bottom: 10px; height: 50px; border-bottom: 1px solid lightgray; text-align: left;}
a { color: blue; font-size: 20px; }
p { color: #777777; padding-left: 5px; }
</style>
</head>
<body>
<div id="container">
<h1>Serch GitHub Repository </h1>
<div class="search-bar">
<input id="textfield" placeholder="Find a repository..." type="text"></input>
</div>
<ul id="list"> </ul>
</div>
<script src="https://unpkg.com/rxjs@6.5.2/bundles/rxjs.umd.min.js"></script>
<script src="./src/index.js"></script>
</body>
</html>
const { from, fromEvent } = rxjs;
const { map, distinctUntilChanged, throttleTime, switchMap } = rxjs.operators;
const searchRepository = (name) => {
return fetch(`https:
.then(response => response.json())
};
const AddRepositoryList = repository => {
const li = document.createElement('li');
const a = document.createElement('a');
a.link = repository.url
a.innerText = `${repository.owner.login}/${repository.name}`
const p = document.createElement('p');
p.innerText = `■ ${repository.name} ${repository.owner.login}`;
li.appendChild(a);
li.appendChild(p);
document.getElementById('list').appendChild(li);
};
fromEvent(document.getElementById("textfield"), 'input')
.pipe(
map(e => e.target.value),
throttleTime(300),
distinctUntilChanged(),
switchMap(repo => from(searchRepository(repo)))
)
.subscribe(response => {
const repositories = response.items;
repositories.forEach(repository => {
AddRepositoryList(repository);
});
});
