Jon Urry jonurry

🎯

Product Developer at AND Digital, Node, TypeScript, AWS, always learning.

jonurry / 17-1 Eloquent Javascript Solutions.js

Created March 30, 2018 11:28

17.1 Shapes (Eloquent JavaScript Solutions)

	<canvas width="600" height="200"></canvas>
	<script>
	let cx = document.querySelector("canvas").getContext("2d");
	cx.clearRect(0, 0, 600, 200);
	const drawTrapezoid = (cx, x, y, width, height, indent) => {
	cx.beginPath();
	cx.moveTo(x + indent, y);
	cx.lineTo(x - indent + width, y);
	cx.lineTo(x + width, y + height);
	cx.lineTo(x, y + height);

jonurry / 16-3 Eloquent Javascript Solutions.js

Last active March 28, 2018 13:52

16.3 A Monster (Eloquent JavaScript Solutions)

	<link rel="stylesheet" href="css/game.css">
	<style>.monster { background: purple }</style>

	<body>
	<script>
	// Complete the constructor, update, and collide methods
	class Monster {
	constructor(pos, speed, chase) {
	this.pos = pos;
	this.speed = speed;

jonurry / 16-2 Eloquent Javascript Solutions.js

Created March 28, 2018 09:04

16.2 Pausing The Game (Eloquent JavaScript Solutions)

	<link rel="stylesheet" href="css/game.css">

	<body>
	<script>
	function trackKeys(keys) {
	let down = Object.create(null);
	function track(event) {
	if (keys.includes(event.key)) {
	down[event.key] = event.type == "keydown";
	event.preventDefault();

jonurry / 16-1 Eloquent Javascript Solutions.js

Created March 27, 2018 13:11

16.1 Project: A Platform Game (Eloquent JavaScript Solutions)

	<link rel="stylesheet" href="css/game.css">

	<body>
	<script>
	// The old runGame function. Modify it...
	async function runGame(plans, Display) {
	let lives = 3;
	for (let level = 0; level < plans.length;) {
	console.log('lives:', lives);
	let status = await runLevel(new Level(plans[level]),

jonurry / 15-3 Eloquent Javascript Solutions.js

Created March 26, 2018 17:25

15.3 Looping a triangle (Eloquent JavaScript Solutions)

	<style>
	button {
	background-color: whitesmoke;
	}
	.selected {
	background-color: white;
	}
	</style>
	<tab-panel>
	<div data-tabname="one">Tab one</div>

jonurry / 15-2 Eloquent Javascript Solutions.js

Created March 26, 2018 15:23

15.2 Mouse Trail (Eloquent JavaScript Solutions)

	<style>
	.trail { /* className for the trail elements */
	position: absolute;
	height: 6px; width: 6px;
	border-radius: 3px;
	background: teal;
	}
	body {
	height: 300px;
	}

jonurry / 15-1 Eloquent Javascript Solutions.js

Created March 26, 2018 11:19

15.1 Baloon (Eloquent JavaScript Solutions)

	<p>🎈</p>

	<script>
	let baloon = document.querySelector('p');
	let fontSize = 16;
	let fontUnit = 'px';
	function increaseFontSizeOfElement(node, percentage) {
	fontSize += fontSize * percentage;
	node.style.fontSize = fontSize + fontUnit;
	};

jonurry / 14-3 Eloquent Javascript Solutions.js

Created March 26, 2018 08:42

14.3 The Cat's Hat (Eloquent JavaScript Solutions)

	<style>body { min-height: 400px }</style>
	<img src="img/cat.png" id="cat" style="position: absolute">
	<img src="img/hat.png" id="hat" style="position: absolute">
	<img src="img/hat.png" id="hat2" style="position: absolute">

	<script>
	let cat = document.querySelector("#cat");
	let hat = document.querySelector("#hat");

	let angle = 0;

jonurry / 14-2 Eloquent Javascript Solutions.js

Created March 23, 2018 17:23

14.2 Elements By Tag Name (Eloquent JavaScript Solutions)

	<h1>Heading with a <span>span</span> element.</h1>
	<p>A paragraph with <span>one</span>, <span>two</span>
	spans.</p>

	<script>
	function byTagName(node, tagName) {
	let nodes = [];
	tagName = tagName.toLowerCase();

	function addMatchingChildNodes(node) {

jonurry / 14-1 Eloquent Javascript Solutions.js

Created March 23, 2018 13:35

14.1 Build a Table (Eloquent JavaScript Solutions)

	<h1>Mountains</h1>

	<div id="mountains"></div>

	<script>
	const MOUNTAINS = [
	{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
	{name: "Everest", height: 8848, place: "Nepal"},
	{name: "Mount Fuji", height: 3776, place: "Japan"},
	{name: "Vaalserberg", height: 323, place: "Netherlands"},