I'm doing a web application in which the purpose will be to use an API to just list some information (GET) and for that I would use only javaScript and html.
The API is this: link and has key (headers).
const app = document.getElementById('root');
const container = document.createElement('div');
container.setAttribute('class', 'container');
app.appendChild(container);
var request = new XMLHttpRequest();
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function() {
// Begin accessing JSON data here
var data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
data.forEach(movie => {
const card = document.createElement('div');
card.setAttribute('class', 'card');
const h1 = document.createElement('h1');
h1.textContent = movie.title;
const p = document.createElement('p');
movie.description = movie.description.substring(0, 40);
p.textContent = '${movie.description}...';
container.appendChild(card);
card.appendChild(h1);
card.appendChild(p);
});
} else {
const errorMessage = document.createElement('marquee');
errorMessage.textContent = 'Gah, it's not working!';
app.appendChild(errorMessage);
}
}
request.send();html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Dosis', sans-serif;
line-height: 1.6;
color: #666;
background: #F6F6F6;
}
#root {
max-width: 1000px;
margin: 0 auto;
}
h1 {
text-align: center;
background-image: linear-gradient(120deg, #96af9f 0%, #9fc5a7 100%);
margin: 0;
font-size: 20px;
color: white;
}
img {
display: block;
margin: 1rem auto;
max-width: 8%;
}
p {
text-align: center;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.card {
background: white;
box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
overflow: hidden;
transition: all .2s linear;
}
.card:hover {
box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
transform: translate3D(0, -2px, 0);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
margin-bottom: 30px;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #9fc5a7;
}
@media screen and (min-width: 200px) {
.card {
flex: 1 1 calc(100% - 2rem);
}
}
@media screen and (min-width: 900px) {
.card {
flex: 1 1 calc(100% - 2rem);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football stats</title>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="root">
<img src="./img/logo.png" alt="logo">
<ul>
<li><a href="#home">Home</a></li>
<li><a class="active"href="index.html">Today Matches</a></li>
<li><a href="#contact">Portuguese League</a></li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>The main idea is to make a list of the games of the day with the name of the championship and the respective game.
In the documentation have this request example in javascript / jquery:
$ ajax ({
Headers: {'X-Auth-Token': 'YOUR_API_TOKEN'},
url: ' link ' LIVE ',
dataType: 'json',
type: 'GET',
}). done (function (response) {
// do something with the response, eg isolate the id of the linked resource
console.log (response);
});
The question is how can I make a connection to an api with headers?