Use APIs

Example 1

HTML

<div id=”monument”></div>

<div id=”lyrics”></div>

CSS

#monument{

height: 150px;

width: 150px;

background-image: url(‘https://i.ytimg.com/vi/StIQwu5vwEk/hqdefault.jpg’);

background-repeat: no-repeat;

background-size: contain;

}

 

#lyrics{

display: none;

height: 500px;

width: 500px;

background-color: white;

position:absolute;

overflow:scroll;

}

 

JavaScript

var lyrics = document.getElementById(‘lyrics’);

var btn = document.getElementById(‘monument’);

 

btn.addEventListener(‘touchstart’, function(){

var request = new XMLHttpRequest();

request.open(‘GET’, ‘https://api.lyrics.ovh/v1/a day to remember/monument’,true);

 

request.onreadystatechange = function () {

if (this.readyState == 4) {

var data = JSON.parse(this.responseText);

console.log(‘Body:’, data.lyrics);

lyrics.innerHTML = data.lyrics;

lyrics.style.display = “block”;

}

};

 

request.send();

});

 

Description

Here is a lyrics API used which loads the lyrics of a song. After clicking the button with the cover of the CD the lyrics are shown.

 Example 2

Fragment 1
HTML

<div id=”text” class=”text”></div>

CSS

.text{

display: none;

font-size: 50px;

height: 70px;

width: 400px;

background-color: grey;

text-align: center;

 

}

JavaScript

function getGOTCharacter( nr , type){

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

// Typical action to be performed when the document is ready:

var data = JSON.parse(this.responseText);

var text = document.getElementById(‘text’);

text.style.display = “none”;

text.innerHTML = “”;

text.innerHTML = data.name;

text.style.display = “block”;

}else{

console.log(“else”);

}

};

xhttp.open(“GET”, “https://anapioficeandfire.com/api/” + type + “/” + nr, true);

xhttp.send();

}

return{

getGOTCharacter:getGOTCharacter

}

 

Description

This is the function which is used by two Buttons. Depending on the Button a number and a string is used as attributes to load a name from the Game of Thrones API. The text div is hidden and is going to be displayed when the loaded name is set in the div.

By using return the function can be called by other HTML Fragments.

Fragment 2:
HTML

<button class=”button” type=”button” id=”btn”>get your GOT character</button>

CSS

.button{

font-size: 25px;

font-family: helvetica;

height: 50px;

width: 400px;

}

JavaScript

var btn = document.getElementById(‘btn’);

var random = Math.floor((Math.random() * 100) + 1);

 

btn.addEventListener(‘touchstart’, function(){

userSpace.getGOTCharacter( random , ‘characters’);

});

Description

With userSpace and the function name you can call the function which was return in the first fragment. After clicking the button, the function is called and is adding a number and ‘characters’ to the URL from which the data should be loaded.

Fragment 3:

HTML

<button class=”button” type=”button” id=”btn”>get your GOT house</button>

CSS

.button{

font-size: 25px;

font-family: helvetica;

height: 50px;

width: 400px;

}

JavaScript

var btn = document.getElementById(‘btn’);

var random = Math.floor((Math.random() * 100) + 1);

btn.addEventListener(‘touchstart’, function(){

userSpace.getGOTCharacter( random , ‘houses’);

});

Description

Same as Fragment 2 except that the string ‘house’ and not ‘characters’ is used.

© 2018 Konica Minolta Business Solutions Europe GmbH

Close Menu
Close Panel