Last active
December 10, 2020 13:01
-
-
Save strickvl/2c14025cbf57c258ddf2bd8d25391998 to your computer and use it in GitHub Desktop.
Sample page to practice AJAX requests, handlebars and handling asynchronous requests
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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