OutPut:
|
|
|
Create a html file index.html
<html>
<head>
<script src="https://rawgit.com/Microsoft/TypeScript/master/lib/typescriptServices.js"></script>
<script src="https://rawgit.com/basarat/typescript-script/master/transpiler.js"></script>
<script src="script.js"></script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" value="" onblur="searchItem(this)">
<ul id="demo"></ul>
</td>
<td>
<ul id="list"></ul>
</td>
</tr>
</table>
<style>
table td {
vertical-align: top;
}
ul li {
margin: 2px 0;
list-style-type: decimal;
}
</style>
</body>
</html>
|
|
|
Create a script.js file
var getJSON = function (url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function () {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
};
getJSON('https://raw.githubusercontent.com/Bowserinator/Periodic-Table-JSON/master/PeriodicTableJSON.json').then(function (data) {
// result.innerText = data.elements; //display the result in an HTML element
setTimeout(() => {
console.log('hello');
let list = document.getElementById('list');
data.elements.forEach(elem => {
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(elem.name));
list.appendChild(entry);
});
}, 500);
}, function (status) { //error detection....
alert('Something went wrong.');
});
function searchItem(typed) {
document.getElementById('demo').innerHTML = '';
var items = document.getElementById("list").getElementsByTagName("li");
for (i = 0; i < items.length; i++) {
text = (items[i].innerHTML).toLowerCase();
if (!typed.value || text.indexOf((typed.value).toLowerCase()) != -1) {
items[i].style.border = '1px solid red';
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(items[i].innerHTML));
document.getElementById('demo').appendChild(entry);
}
}
}
