davidglezz/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
    html,body{
        font-family: monospace;
    }
      button {
        padding: 2em;
        margin: 2em;
        cursor: pointer;
        border: none;
        outline: none;
        color: #FFF;
        background-color: #27ae60;
        text-transform: uppercase;
      }
      button:hover{
        background-color: #2ecc71;
      }
    </style>
</head>
<body>
<center><h3>SEE CONSOLE</h3>
    <button type="button" id="buttonCallback">GET BY CALLBACK</button>
    <button type="button" id="buttonPromise">GET BY PROMISE</button>
    <button type="button" id="buttonAsync">GET BY ASYNC &amp; AWAIT</button>
    <button type="button" onclick="logResolversSerial()">Log Serial</button>
    <button type="button" onclick="logResolversParallel()">Log Parallel</button>
    </center>
    <script>
        //From https://applyhead.com
const http = {

	getWithCallback(url, callback) {
		const xhr = new XMLHttpRequest();
		let response = null;
		xhr.addEventListener("readystatechange", function() {
			if (this.readyState === xhr.DONE) {
				response = this.responseText;
				if (response) {
					response = JSON.parse(response);
					callback(false, response);
				}
			}
		});
		xhr.open("GET", url, true);
		xhr.send();
		xhr.onerror = function(error) {
			callback(true, {
				error: "Some error"
			})
		}
	},

	getWithPromise(url) {
		return new Promise((resolve, reject) => {
			const xhr = new XMLHttpRequest();
			let response = null;
			xhr.addEventListener("readystatechange", function() {
				if (this.readyState === xhr.DONE) {
					response = this.responseText;
					if (response) {
						response = JSON.parse(response);
						resolve(response);
					}
				}
			});
			xhr.open("GET", url, true);
			xhr.send();
			xhr.onerror = function(error) {
				reject({
					error: "Some error"
				})
			}
		});
	},

	resolveAfter(secs) {
		return new Promise((resolve, reject) => {
			window.setTimeout(() => {
				resolve(`I should take ${secs} seconds`);
			}, secs * 1000);
		})
	}
};

const buttonCallback = document.querySelector('#buttonCallback');
const buttonPromise = document.querySelector('#buttonPromise');
const buttonAsync = document.querySelector('#buttonAsync');
const link = 'https://api.github.com/search/users?q=location:delhi';


const logWithAsync = async(url) => {
	let data = await http.getWithPromise(url);
	console.log(data);
};

const logResolversSerial = async() => {
	console.log(await http.resolveAfter(2));
	console.log(await http.resolveAfter(3));
	console.log(await http.resolveAfter(4));
};

const logResolversParallel = () => {
	http.resolveAfter(5).then(v => console.log(v))
	http.resolveAfter(5).then(v => console.log(v))
	http.resolveAfter(5).then(v => console.log(v))
	http.resolveAfter(5).then(v => console.log(v))
}


buttonCallback.addEventListener("click", () => {
	http.getWithCallback(link, function(err, data) {
		if (!err) {
			console.log(data);
		}
	});
});

buttonPromise.addEventListener("click", () => {
	http.getWithPromise(link).then(data => {
		console.log(data);
	}).catch(error => {
		console.log(error);
	});
});

buttonAsync.addEventListener("click", () => {
	logWithAsync(link);
});
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style media="screen">
	html,body{
	font-family: monospace;
	}
	button {
	padding: 2em;
	margin: 2em;
	cursor: pointer;
	border: none;
	outline: none;
	color: #FFF;
	background-color: #27ae60;
	text-transform: uppercase;
	}
	button:hover{
	background-color: #2ecc71;
	}
	</style>
	</head>
	<body>
	<center><h3>SEE CONSOLE</h3>
	<button type="button" id="buttonCallback">GET BY CALLBACK</button>
	<button type="button" id="buttonPromise">GET BY PROMISE</button>
	<button type="button" id="buttonAsync">GET BY ASYNC & AWAIT</button>
	<button type="button" onclick="logResolversSerial()">Log Serial</button>
	<button type="button" onclick="logResolversParallel()">Log Parallel</button>
	</center>
	<script>
	//From https://applyhead.com
	const http = {

	getWithCallback(url, callback) {
	const xhr = new XMLHttpRequest();
	let response = null;
	xhr.addEventListener("readystatechange", function() {
	if (this.readyState === xhr.DONE) {
	response = this.responseText;
	if (response) {
	response = JSON.parse(response);
	callback(false, response);
	}
	}
	});
	xhr.open("GET", url, true);
	xhr.send();
	xhr.onerror = function(error) {
	callback(true, {
	error: "Some error"
	})
	}
	},

	getWithPromise(url) {
	return new Promise((resolve, reject) => {
	const xhr = new XMLHttpRequest();
	let response = null;
	xhr.addEventListener("readystatechange", function() {
	if (this.readyState === xhr.DONE) {
	response = this.responseText;
	if (response) {
	response = JSON.parse(response);
	resolve(response);
	}
	}
	});
	xhr.open("GET", url, true);
	xhr.send();
	xhr.onerror = function(error) {
	reject({
	error: "Some error"
	})
	}
	});
	},

	resolveAfter(secs) {
	return new Promise((resolve, reject) => {
	window.setTimeout(() => {
	resolve(`I should take ${secs} seconds`);
	}, secs * 1000);
	})
	}
	};

	const buttonCallback = document.querySelector('#buttonCallback');
	const buttonPromise = document.querySelector('#buttonPromise');
	const buttonAsync = document.querySelector('#buttonAsync');
	const link = 'https://api.github.com/search/users?q=location:delhi';


	const logWithAsync = async(url) => {
	let data = await http.getWithPromise(url);
	console.log(data);
	};

	const logResolversSerial = async() => {
	console.log(await http.resolveAfter(2));
	console.log(await http.resolveAfter(3));
	console.log(await http.resolveAfter(4));
	};

	const logResolversParallel = () => {
	http.resolveAfter(5).then(v => console.log(v))
	http.resolveAfter(5).then(v => console.log(v))
	http.resolveAfter(5).then(v => console.log(v))
	http.resolveAfter(5).then(v => console.log(v))
	}


	buttonCallback.addEventListener("click", () => {
	http.getWithCallback(link, function(err, data) {
	if (!err) {
	console.log(data);
	}
	});
	});

	buttonPromise.addEventListener("click", () => {
	http.getWithPromise(link).then(data => {
	console.log(data);
	}).catch(error => {
	console.log(error);
	});
	});

	buttonAsync.addEventListener("click", () => {
	logWithAsync(link);
	});
	</script>
	</body>
	</html>