This project will help you to learn API calling using XMLHttpRequest
---------------
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<title>Harry News</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Indian Shatabdi News</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- navbar ends -->
<div class="container my-3">
<h3>
Top News :
<span class="badge badge-secondary">Indian Shatabdi News</span>
</h3>
<hr />
<div class="accordion" id="newsApi">
<!-- dynamically from java script -->
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
<script src="index.js"></script>
</body>
</html>
index.js:
-----------
console.log("hello");
// initialize the news api parameter
let source = "techcrunch";
const apiKey = "ba0682162142421ba3b000cd58a763a8";
let newsAccordian = document.getElementById("newsApi");
// grab the news api and create AJAX get reqst
let xhr = new XMLHttpRequest();
xhr.open(
"GET",
`https://newsapi.org//v2/top-headlines?sources=${source}&apiKey=${apiKey}`
);
xhr.onload = function () {
if (this.status === 200) {
let json = JSON.parse(this.responseText);
let articles = json.articles;
let newsHTML = "";
articles.forEach(function (element, index) {
console.log("element :", index);
newsHTML += `
<div class="card">
<div class="card-header" id="heading${index}">
<h2 class="mb-0">
<button
class="btn btn-link btn-block text-left collapsed"
type="button"
data-toggle="collapse"
data-target="#collapse${index}"
aria-expanded="true"
aria-controls="collapse${index}"
>
<h6> <span class="badge badge-secondary">News ${index+1}</span>
${element.title} </h6>
</button>
</h2>
</div>
<div
id="collapse${index}"
class="collapse"
aria-labelledby="heading${index}"
data-parent="#newsApi"
>
<div class="card-body">
${element["content"]}. <a href ="${
element.url
}" target = "_blank">Read more...</a>
</div>
</div>
</div>`;
});
newsAccordian.innerHTML = newsHTML;
} else {
console.log("some error occured");
}
};
xhr.send();
0 Comments