strickvl/ajaxPractice.html

## ajaxPractice.html
<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>
	<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>