JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<pre id=painted></pre>

JavaScript

var _painted = 0, $painted = document.getElementById('painted');

var attributes = 6,
points = 0;

var stat = new Array();
for (i=0;i<attributes;i++) stat[i] = 0;
for (attribute=0; attribute<attributes; attribute++) {
 	stat[attribute] = roll4d6k3();
  points+= convertStatToPoints(stat[attribute]);
}
if (points < 20)
	output("Points: " + Math.round(100*points)/100 + " (Low)\n\n");
else if (points > 35)
	output("Points: " + Math.round(100*points)/100 + " (High)\n\n");
else
	output("Points: " + Math.round(100*points)/100 + " (Normal)\n\n");

for (i=0;i<attribute;i++) {
	output(i+1 + " -> " + zero(stat[i]) + "\n");
}

function roll4d6k3() {
	var smallest = 6;
  var output = 0;
	for (i=1;i<=4;i++) {
  	var temp = rollRandom(1,6);
  	output+= temp;
    if (temp < smallest) smallest = temp;
  }
  output-=smallest;
  return output;
}
function convertStatToPoints(x) {
	if (x < 3) $painted.textContent+= "Err (Stat too low)";
	else if (x <= 13) return (x-8);
  else if (x > 13 && x <= 16) return ((x-14)*2+7);
  else if (x > 16 && x <= 18) return ((x-17)*3+14);
  else if (x > 18) $painted.textContent+= "Err (Stat too high)";
  else $painted.textContent+= "Err (No Integer Input)";
}
function rollRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min +1)) + min; 
}
function zero(x) {
if (x<10) return "0" + x;
else return x;
}
function output(x) {
	$painted.textContent+= x;
}