Skip to content

Instantly share code, notes, and snippets.

@strickvl
Last active December 10, 2020 13:01
Show Gist options
  • Save strickvl/2c14025cbf57c258ddf2bd8d25391998 to your computer and use it in GitHub Desktop.
Save strickvl/2c14025cbf57c258ddf2bd8d25391998 to your computer and use it in GitHub Desktop.
Sample page to practice AJAX requests, handlebars and handling asynchronous requests
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function selectRandomCatFacts(facts, number) {
let arr = [];
for (let i = 1; i <= number; i += 1) {
let randomIndex = Math.floor(Math.random() * facts.length);
arr.push(facts[randomIndex]);
}
return arr.map(fact => fact.text);
}
class App {
constructor() {
this.createTemplates();
this.placeCatFacts();
this.placeBitcoinPrice();
this.placeDogPhoto();
}
createTemplates() {
this.templates = {};
document.querySelectorAll('script[type="x-handlebars"]').forEach(tmpl => {
this.templates[tmpl['id']] = Handlebars.compile(tmpl['innerHTML']);
});
document.querySelectorAll("[data-type=partial]").forEach(template => {
Handlebars.registerPartial(template['id'], template['innerHTML']);
});
}
placeDogPhoto() {
let obj = {
title: 'Dog Photo',
}
let request = new XMLHttpRequest();
request.open('GET', 'https://dog.ceo/api/breeds/image/random');
request.responseType = 'json';
request.addEventListener('load', event => {
let url = request.response['message'];
obj.photo = url;
let newNode = document.createElement('p');
newNode.innerHTML = this.templates['template-dog-photo'](obj);
document.querySelector('#dog-photo').appendChild(newNode);
});
request.send();
}
placeCatFacts() {
let finalFacts = [];
let request = new XMLHttpRequest();
request.open('GET', 'https://cat-fact.herokuapp.com/facts');
request.responseType = 'json';
request.addEventListener('load', event => {
let facts = request.response['all'];
let obj = {};
obj.facts = selectRandomCatFacts(facts, 5);
obj.title = 'Cat Facts';
let newNode = document.createElement('p');
newNode.innerHTML = this.templates['template-catfacts'](obj);
document.querySelector('#catfacts').appendChild(newNode);
});
request.send();
}
placeBitcoinPrice() {
let obj = {
title: 'Bitcoin Price',
};
let request = new XMLHttpRequest();
request.open('GET', "https://api.coindesk.com/v1/bpi/currentprice.json");
request.responseType = 'json';
request.addEventListener('load', event => {
obj.rate = request.response['bpi']['USD']['rate'];
let newNode = document.createElement('p');
newNode.innerHTML = this.templates['template-bitcoin'](obj);
document.querySelector('#bitcoin').appendChild(newNode);
});
request.send();
};
}
document.addEventListener('DOMContentLoaded', () => {
new App();
});
</script>
</head>
<body>
<h1>A Place for AJAX Calls</h1>
<div id='catfacts'></div>
<div id='dog-photo'></div>
<div id='bitcoin'></div>
<script id='partial' type='x-handlebars' data-type='partial'>
<h2>{{title}}</h2>
</script>
<script id='template-catfacts' type='x-handlebars'>
{{> partial}}
<ul>
{{#each facts}}
<li>{{this}}</li>
{{/each}}
</ul>
</script>
<script id='template-bitcoin' type='x-handlebars'>
{{> partial}}
<p>{{rate}} bitcoins are currently equal to 1 USD</p>
</script>
<script id='template-dog-photo' type='x-handlebars'>
{{> partial}}
<p><img src='{{photo}}' style='height: 300px'></p>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment