albertstartup/.block

## .block
height: 800

## index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #input-number {
        font-size: 75px;
        font-family: "sans-serif";
        margin: 20px;
        width: 200px
      }
      .custom-btn {
        height: 55px;
        width: 100px;
        background: lightblue;
        border: none;
        color: white;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <canvas width="1200" height="200" id="static"></canvas>
    <br>
    <input type="text" id="input-number" value="1">
    <button class="custom-btn" onClick="onClickGo()">Go!</button>
    <br>
    <button class="custom-btn" onClick="onClickAdd1()">Add 1</button>
    <button class="custom-btn" onClick="onClickSubtract1()">Subtract 1</button>
    <br>
    <script src="./index.js"></script>
  </body>
</html>

## index.js
// low return of investment if you read this code but not completely worthless

var canvas = document.getElementById("static"),
    static_ctx = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    tau = 2 * Math.PI,
    circle_radius = 2.5,
    rect_length = 40

function drawCircle(x, y, radius, color="black", ctx) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, tau);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.strokeStyle = color;
  ctx.stroke();
}

function drawHole(x, y, radius, color="black", ctx) {
  ctx.beginPath();
  ctx.arc(x, y, radius+4, 0, tau);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "red";
  ctx.stroke();
}

function drawRect(x, y, w, h, ctx) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.fill();
}

function drawStackedRects(count, start_x, start_y, w, h, ctx) {
  for (var i = 0; i < count; i++) {
    drawRect(start_x, start_y + h*1.3*i, w, h, ctx);
  }
}

function drawAdjecentCircles(count, start_x, start_y, radius, color, ctx) {
  for (var i = 0; i < count; i++) {
    drawCircle(start_x + radius*4*i, start_y, radius, "black", ctx);
  }
}

function drawCirclesAndRects(circle_count, rect_count, start_x, start_y, radius, ctx) {
  drawAdjecentCircles(circle_count, start_x, start_y, circle_radius, "black", ctx);
  drawStackedRects(rect_count, start_x-radius*1.5, start_y+circle_radius*2, rect_length, circle_radius*2, ctx)
}

function drawNumber(num, start_x, start_y, radius, header=false, place=false, ctx) {
  if (num > 19) {
    console.log("0-19 only")
    return false
  }
  if (num == 0) {
    drawHole(start_x, start_y+15, radius, "black", ctx)
  }
  if (header) {
    ctx.font = "21px Ariel";
    ctx.fillStyle = "black"
      if (header=="complex") {
        ctx.fillText("("+num+" x " + Math.pow(20, place-1)+")", start_x, start_y);
      } else {
        ctx.fillText(String(num), start_x, start_y);
      }
  }
  drawCirclesAndRects(num%5, Math.floor(num/5), start_x, start_y+15, radius, ctx);
}

function drawAdjecentNumbers(nums, start_x, start_y, header, ctx) {
  for (var i = 0; i < nums.length; i++) {
    drawNumber(nums[i], start_x+rect_length*3*i, start_y, circle_radius, header, nums.length-i, ctx);
  }
}

function drawAnyNumber(num, start_x, start_y, radius, ctx) {
  var places = Math.floor(Math.log(num)/Math.log(20))+1
  var numbs = []
  for (var i = places; i > 1; i--) {
    var number_for_place = Math.floor(num/Math.pow(20, i-1));
    numbs.push(number_for_place);
    num = num - Math.pow(20, i-1)*number_for_place;
  }
  numbs.push(num)
  console.log(numbs);
  drawAdjecentNumbers(numbs, start_x, start_y, "complex", ctx)
}

function renderNum(num) {
  var existing_canvas = document.getElementById("dynamic")
  if (existing_canvas) {
    document.body.removeChild(existing_canvas)
  }
  var canvas = document.createElement("canvas")
  canvas.setAttribute("id", "dynamic")
  canvas.setAttribute("width", "1200")
  canvas.setAttribute("height", "300")
  document.body.appendChild(canvas)
  drawAnyNumber(num, 20, 100, circle_radius, canvas.getContext("2d"));
}

function onClickAdd1() {
  var el = document.getElementById("input-number")
  el.value = String(Number(el.value) + 1)
  renderNum(el.value)
}

function onClickSubtract1() {
  var el = document.getElementById("input-number")
  el.value = String(Number(el.value) - 1)
  renderNum(el.value)
}

function onClickGo() {
  var el = document.getElementById("input-number")
  renderNum(el.value)
}

drawAdjecentNumbers([0,1,2,3,4,5,6,7,8,9], 20, 20, true, static_ctx)
drawAdjecentNumbers([10,11,12,13,14,15,16,17,18,19], 20, 100, true, static_ctx)
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#input-number {
	font-size: 75px;
	font-family: "sans-serif";
	margin: 20px;
	width: 200px
	}
	.custom-btn {
	height: 55px;
	width: 100px;
	background: lightblue;
	border: none;
	color: white;
	font-size: 20px;
	}
	</style>
	</head>
	<body>
	<canvas width="1200" height="200" id="static"></canvas>
	<br>
	<input type="text" id="input-number" value="1">
	<button class="custom-btn" onClick="onClickGo()">Go!</button>
	<br>
	<button class="custom-btn" onClick="onClickAdd1()">Add 1</button>
	<button class="custom-btn" onClick="onClickSubtract1()">Subtract 1</button>
	<br>
	<script src="./index.js"></script>
	</body>
	</html>
	// low return of investment if you read this code but not completely worthless

	var canvas = document.getElementById("static"),
	static_ctx = canvas.getContext("2d"),
	width = canvas.width,
	height = canvas.height,
	tau = 2 * Math.PI,
	circle_radius = 2.5,
	rect_length = 40

	function drawCircle(x, y, radius, color="black", ctx) {
	ctx.beginPath();
	ctx.arc(x, y, radius, 0, tau);
	ctx.fillStyle = color;
	ctx.fill();
	ctx.lineWidth = 5;
	ctx.strokeStyle = color;
	ctx.stroke();
	}

	function drawHole(x, y, radius, color="black", ctx) {
	ctx.beginPath();
	ctx.arc(x, y, radius+4, 0, tau);
	ctx.lineWidth = 3;
	ctx.strokeStyle = "red";
	ctx.stroke();
	}

	function drawRect(x, y, w, h, ctx) {
	ctx.beginPath();
	ctx.rect(x,y,w,h);
	ctx.fill();
	}

	function drawStackedRects(count, start_x, start_y, w, h, ctx) {
	for (var i = 0; i < count; i++) {
	drawRect(start_x, start_y + h1.3i, w, h, ctx);
	}
	}

	function drawAdjecentCircles(count, start_x, start_y, radius, color, ctx) {
	for (var i = 0; i < count; i++) {
	drawCircle(start_x + radius4i, start_y, radius, "black", ctx);
	}
	}

	function drawCirclesAndRects(circle_count, rect_count, start_x, start_y, radius, ctx) {
	drawAdjecentCircles(circle_count, start_x, start_y, circle_radius, "black", ctx);
	drawStackedRects(rect_count, start_x-radius1.5, start_y+circle_radius2, rect_length, circle_radius*2, ctx)
	}

	function drawNumber(num, start_x, start_y, radius, header=false, place=false, ctx) {
	if (num > 19) {
	console.log("0-19 only")
	return false
	}
	if (num == 0) {
	drawHole(start_x, start_y+15, radius, "black", ctx)
	}
	if (header) {
	ctx.font = "21px Ariel";
	ctx.fillStyle = "black"
	if (header=="complex") {
	ctx.fillText("("+num+" x " + Math.pow(20, place-1)+")", start_x, start_y);
	} else {
	ctx.fillText(String(num), start_x, start_y);
	}
	}
	drawCirclesAndRects(num%5, Math.floor(num/5), start_x, start_y+15, radius, ctx);
	}

	function drawAdjecentNumbers(nums, start_x, start_y, header, ctx) {
	for (var i = 0; i < nums.length; i++) {
	drawNumber(nums[i], start_x+rect_length3i, start_y, circle_radius, header, nums.length-i, ctx);
	}
	}

	function drawAnyNumber(num, start_x, start_y, radius, ctx) {
	var places = Math.floor(Math.log(num)/Math.log(20))+1
	var numbs = []
	for (var i = places; i > 1; i--) {
	var number_for_place = Math.floor(num/Math.pow(20, i-1));
	numbs.push(number_for_place);
	num = num - Math.pow(20, i-1)*number_for_place;
	}
	numbs.push(num)
	console.log(numbs);
	drawAdjecentNumbers(numbs, start_x, start_y, "complex", ctx)
	}

	function renderNum(num) {
	var existing_canvas = document.getElementById("dynamic")
	if (existing_canvas) {
	document.body.removeChild(existing_canvas)
	}
	var canvas = document.createElement("canvas")
	canvas.setAttribute("id", "dynamic")
	canvas.setAttribute("width", "1200")
	canvas.setAttribute("height", "300")
	document.body.appendChild(canvas)
	drawAnyNumber(num, 20, 100, circle_radius, canvas.getContext("2d"));
	}

	function onClickAdd1() {
	var el = document.getElementById("input-number")
	el.value = String(Number(el.value) + 1)
	renderNum(el.value)
	}

	function onClickSubtract1() {
	var el = document.getElementById("input-number")
	el.value = String(Number(el.value) - 1)
	renderNum(el.value)
	}

	function onClickGo() {
	var el = document.getElementById("input-number")
	renderNum(el.value)
	}

	drawAdjecentNumbers([0,1,2,3,4,5,6,7,8,9], 20, 20, true, static_ctx)
	drawAdjecentNumbers([10,11,12,13,14,15,16,17,18,19], 20, 100, true, static_ctx)