ricokahler/index.html

## index.html
<html>
    <head>
        <title>what up</title>
    </head>
    <body>
        <h1 class="foo"></h1>
        <div class="stuff"></div>
        <script>
            async function loadData() {
                const response = await fetch('https://api.github.com/users/ricokahler/gists');
                const gists = await response.json();
                const element = document.querySelector('.stuff');

                const anchors = gists.map(gist => gist.url).map(url => {
                    const anchor = document.createElement('a');
                    anchor.href = url;
                    anchor.innerText = url;
                    return anchor;
                });

                for (const anchor of anchors) {
                    element.appendChild(anchor);
                }
            }

            const button = document.createElement('button');
            const input = document.createElement('input');

            button.innerText = 'load stuff';

            button.addEventListener('click', () => {
                loadData();
            });

            input.addEventListener('input', event => {
                const value = event.currentTarget.value;
                document.querySelector('.foo').innerText = value;
            });

            document.body.appendChild(button);
            document.body.appendChild(input);
        </script>
    </body>
</html>

## package.json
{
  "name": "playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "http-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "http-server": "^0.11.1"
  }
}
	<html>
	<head>
	<title>what up</title>
	</head>
	<body>
	<h1 class="foo"></h1>
	<div class="stuff"></div>
	<script>
	async function loadData() {
	const response = await fetch('https://api.github.com/users/ricokahler/gists');
	const gists = await response.json();
	const element = document.querySelector('.stuff');

	const anchors = gists.map(gist => gist.url).map(url => {
	const anchor = document.createElement('a');
	anchor.href = url;
	anchor.innerText = url;
	return anchor;
	});

	for (const anchor of anchors) {
	element.appendChild(anchor);
	}
	}

	const button = document.createElement('button');
	const input = document.createElement('input');

	button.innerText = 'load stuff';

	button.addEventListener('click', () => {
	loadData();
	});

	input.addEventListener('input', event => {
	const value = event.currentTarget.value;
	document.querySelector('.foo').innerText = value;
	});

	document.body.appendChild(button);
	document.body.appendChild(input);
	</script>
	</body>
	</html>
	{
	"name": "playground",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"start": "http-server"
	},
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"http-server": "^0.11.1"
	}
	}