JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

Rango de palabras
de:
<input type="number" class="c1" value="160"/>
a
<input type="number" class="c2" value="180"/>
<br/>
Rango de errores
de:
<input type="number" class="e1" value="1"/>
a
<input type="number" class="e2" value="5"/>
<br/>
<button class="l">
Borrar
</button>
<button class="g">
Generar
</button>
<input type="number" class="c" value="3"/>
<br/>
<table class="e">
  <tr>
    <td>Numero de palabras</td>
    <td>Errores</td>
    <td>Correctas</td>
    <td>Porcentaje</td>
  </tr>
</table>

CSS

table, td {
    border: 1px solid black;
}

JavaScript

document.querySelector(".g").onclick = function(){
	var min = document.querySelector(".c1").value;
	var max = document.querySelector(".c2").value;
	var mine = document.querySelector(".e1").value;
	var maxe = document.querySelector(".e2").value;
	var r = document.querySelector(".e");
	var c = document.querySelector(".c").value;

	for(var i = 0; i < c; i++){
		var np = getRandomInt(min, max);
		var npf = getRandomInt(mine, maxe);
		var npc = np - npf;
		var por = npc * 100 / 460;
		add(np, npf, npc, por.toFixed(2));
	}
}
document.querySelector(".l").onclick = function(){
	var r = document.querySelector(".e");
  r.innerHTML = "<tr><td>Numero de palabras</td><td>Errores</td><td>Correctas</td>		<td>Porcentaje</td></tr>";
}
function add(d1, d2, d3, d4) {
    var table = document.querySelector(".e");
    var row = table.insertRow(table.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = d1;
    cell2.innerHTML = d2;
    cell3.innerHTML = d3;
    cell4.innerHTML = d4;
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + parseInt(min);
}