JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Best location</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app">
		<h2>Street params</h2>
		<div id="params">
			<label>Coma separated list of available buildings</label>
			<br/><input size="256" id="buildings" value="shop,gym,school" />
			<br/><label>Street size<label>
			<br/><input id="street_size" value="10" />
			<br/><label>Max buildings per side</label>
			<br/><input id="max_per_side" value="3" />
			<br/><label>Search for buildings(Coma separated list)</label>
			<br/><input id="search" size="256" value="shop,gym,school" />
			<br/><button type="button" onclick="runSimulation()" id="run">Run</button>
		</div>
	</div>
</body>

</html>

JavaScript

var street = [];
function runSimulation() {
  console.log("start simulation");
  generateStreet();
};

function generateStreet () {
	var street_size = parseInt(document.getElementById("street_size").value);
  console.log("street_size:"+street_size);
  var buildings = document.getElementById("buildings").value.split(",");
  console.log("buildings:"+buildings);
  console.log("total buildings available:"+buildings.length);
  var max_per_side = parseInt(document.getElementById("max_per_side").value);
  console.log("max_per_side:"+max_per_side);
  
  
}