usrrname/index.html

## index.html
<!doctype html>
<html>
<head>
<style>
  *{
  font-family:'Open Sans', Arial, Sans-serif;
}
body{
  padding:1em;
}
input{
  font-size:small;
}
#uResult, #themResult{
  font-size:medium;
  color:teal;
  padding-top:1em;
}
sub{
  margin-top:1em;
  padding-left:0.5em;
  color:gray;
}
</style>
</head>
<body>
<h2>Rent splitting for Socialist Couples</h2>
<h4>Fair and equitable with a sliding scale!</h4>
<form>
  <label>How much is your rent?</label>
  <input id="rent" name="rent" type="number" min="1" placeholder="Rent per month" required>
  <br><br>
  <label>Your annual salary</label>
  <input id="yourSalary" name="yourSalary" type="number" min="1" placeholder="Your precious moolah" required><br><br>
  <label>Their annual salary</label>
  <input id="theirSalary" name="theirSalary" type="number" min="1" placeholder="Their stash" required><br><br>
</form>
<input name="reset" type="reset">
<input type="submit" role="button" value="Calculate" onclick="splitRent()">

<div id="uResult">
</div>
<div id="themResult">
</div>

<sub>I'm not storing your information, by the way</sub>
  <script src="rentSplitter.js"></script>
</body>
</html>

## rentSplitter.js
function splitRent(x,y){
var rent = parseInt(document.getElementById('rent').value);
x = parseInt(document.getElementById('yourSalary').value);
y = parseInt(document.getElementById('theirSalary').value);
var uResult = document.getElementById('uResult');
var themResult = document.getElementById('themResult');
var youPay, theyPay;
youPay = (x/(x+y)) * rent;
theyPay = rent - youPay;
uResult.innerHTML = 'You pay $'+ youPay.toFixed(2);
themResult.innerHTML ='Your partner pays $'+ theyPay.toFixed(2);
};
	<!doctype html>
	<html>
	<head>
	<style>
	*{
	font-family:'Open Sans', Arial, Sans-serif;
	}
	body{
	padding:1em;
	}
	input{
	font-size:small;
	}
	#uResult, #themResult{
	font-size:medium;
	color:teal;
	padding-top:1em;
	}
	sub{
	margin-top:1em;
	padding-left:0.5em;
	color:gray;
	}
	</style>
	</head>
	<body>
	<h2>Rent splitting for Socialist Couples</h2>
	<h4>Fair and equitable with a sliding scale!</h4>
	<form>
	<label>How much is your rent?</label>
	<input id="rent" name="rent" type="number" min="1" placeholder="Rent per month" required>
	<br><br>
	<label>Your annual salary</label>
	<input id="yourSalary" name="yourSalary" type="number" min="1" placeholder="Your precious moolah" required><br><br>
	<label>Their annual salary</label>
	<input id="theirSalary" name="theirSalary" type="number" min="1" placeholder="Their stash" required><br><br>
	</form>
	<input name="reset" type="reset">
	<input type="submit" role="button" value="Calculate" onclick="splitRent()">

	<div id="uResult">
	</div>
	<div id="themResult">
	</div>

	<sub>I'm not storing your information, by the way</sub>
	<script src="rentSplitter.js"></script>
	</body>
	</html>
	function splitRent(x,y){
	var rent = parseInt(document.getElementById('rent').value);
	x = parseInt(document.getElementById('yourSalary').value);
	y = parseInt(document.getElementById('theirSalary').value);
	var uResult = document.getElementById('uResult');
	var themResult = document.getElementById('themResult');
	var youPay, theyPay;
	youPay = (x/(x+y)) * rent;
	theyPay = rent - youPay;
	uResult.innerHTML = 'You pay $'+ youPay.toFixed(2);
	themResult.innerHTML ='Your partner pays $'+ theyPay.toFixed(2);
	};