Untitled

dabblet.css

#blokje {
   width: 300px;
   height: 600px;
   border: 1px solid black;
   background-color: #353;
   transition: 1s;
}

dabblet.html

<div id="blokje"></div>
<form>
	<label>Breedte in cm: </label><input type="number" name="width" id="width" placeholder="width in cm" value="30"/> <br />
	<label>Hoogte in cm: </label><input type="number" name="height" id="height" placeholder="height in cm" value="60"/> <br />
	<input type="button" id="calc" value="calculate" />
</form>

dabblet.js

var button = document.getElementById('calc');
button.onclick = calculate;

calculate();

function calculate() {
	var width = document.getElementById('width').value;
	var height = document.getElementById('height').value;
	var block = document.getElementById('blokje');
	var proportion = width / height;
	
	blockwidth = proportion * 600;
	
	console.log(width, height, blockwidth, proportion);
	
	block.style.width=blockwidth+"px";
}

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}