<!DOCTYPE html>
<html>
<head>
<title>JavaScript Project</title>
</head>
<body>
<h1>JavaScript</h1>
<div class="output"></div>
<input class="searchTerm">
<button class="btn">Click</button>
<script src="pro2.js"></script>
</body>
</html>const output = document.querySelector('.output');
const btn1 = document.querySelector('.btn');
//const url = 'https://api.github.com/repos/twbs/bootstrap';
//const url = 'pro2.json';
const url = 'https://api.github.com/search/repositories';
const searchTerm = document.querySelector('.searchTerm');
window.addEventListener('DOMContentLoaded',(e)=>{
console.log('ready');
fetch('https://api.github.com/zen').
then(rep => rep.text()).
then(message => {
document.querySelector('h1').textContent = message;
})
})
btn1.addEventListener('click',(e)=>{
const val = searchTerm.value;
const queryString = url + '?q='+encodeURIComponent(val);
console.log(queryString);
fetch(queryString)
.then((rep)=>rep.json())
.then((data)=>{
outputArray2(data);
})
.catch((error)=>{
console.log('Fetch problem : '+error.message);
})
})
function outputArray2(data){
console.log(data.items);
if(data.items.length>0){
data.items.forEach(element => {
outputContenttoPage(element);
output.innerHTML += '<hr>';
});
}
}
function outputArray(data){
console.log(data);
data.forEach(element => {
outputContenttoPage(element);
output.innerHTML += '<hr>';
});
}
function outputContenttoPage(data){
console.log(data);
let html = `
${data['name']} <br>
${data['id']} <br>
${data['owner']['id']}<br>
<a href="${data['html_url']}" target="_blank">${data['html_url']}</a><br>
`;
output.innerHTML += html;
}