Add input fields for interest, insurance, and taxes

assets/main.css

@@ -27,6 +27,11 @@ input, select {
 	border-radius: 3px;
 }
 
+input[type=checkbox] {
+	margin-right: auto;
+	/* height: 20px; */
+	/* width: 20px; */
+}
 
 section.form label {
 	display: flex;

components/new.vue

@@ -93,7 +93,47 @@ selected="estimate.transaction == 1">
 <h3>Loan Details</h3>
 <label>Loan Term (years)</label>
 <input :value="loans[sel].term"
-@input="(e) => loans[sel].term = parseInt(e.target.value.replace(/[^0-9]/g, ''))">
+@input="(e) => loans[sel].term = strip(e)">
+
+<label>Loan Program</label>
+<select id="" name="" v-model="loans[sel].program">
+	<option value="none">None</option>
+</select>
+
+<label>Loan to Value (%)</label>
+<input :value="loans[sel].ltv" @input="setLtv">
+<label>Loan Amount ($)</label>
+<input :value="loans[sel].amount"
+@input="setAmount">
+<label>Housing Expense DTI (%) - Optional</label>
+<input :value="loans[sel].housingDti" @input="setHousingDti">
+<label>Total DTI (%) - Optional</label>
+<input :value="loans[sel].dti" @input="setDti">
+<label>Interest Rate (%)</label>
+<input :value="loans[sel].interest" @input="setInterest">
+<label>Days of Interest</label>
+<input :value="loans[sel].interestDays" @input="setInterestDays">
+
+<label>Hazard Insurance Escrowed?</label>
+<input type="checkbox" :value="loans[sel].hazardEscrowed" @input="">
+<label>Months to Escrow Hazard Insurance</label>
+<input :value="loans[sel].hazardMonths" @input="">
+<label>Hazard Insurance ($/monthly)</label>
+<input :value="loans[sel].hazard" @input="setHazard">
+
+<label>Taxes Escrowed?</label>
+<input type="checkbox" :value="loans[sel].taxEscrowed" @input="">
+<label>Months to Escrow Real Estate Tax</label>
+<input :value="loans[sel].taxEscrow" @input="">
+<label>Real Estate Tax ($/monthly)</label>
+<input :value="loans[sel].tax" @input="setTax">
+</section>
+
+<section class="form inputs">
+<h3>Interest Rates</h3>
+<label>Loan Term (years)</label>
+<input :value="loans[sel].term"
+@input="(e) => loans[sel].term = strip(e)">
 
 <label>Loan Program</label>
 <select id="" name="" v-model="loans[sel].program">
@@ -115,31 +155,30 @@ selected="estimate.transaction == 1">
 </template>
 
 <script>
-const loans = [
-	{
-		title: "Loan Example",
-		type: "",
-		term: 0,
-		ltv: 0,
-		dti: 0,
-		housingDti: 0,
-		amount: 0,
-		program: "",
-		pud: false,
-		zip: ''
-	},
-	{
-		title: "Another One",
+const example = {
+		title: "Example",
 		type: "",
 		term: 0,
-		ltv: 0,
+		ltv: 0, // Loan to home value ratio
 		dti: 0,
 		housingDti: 0,
 		amount: 0,
+		interest: 0,
+		interestDays: 0,
+		hazard: 0, // Hazard insurance monthly payment
+		hazardMonths: 0, // Hazard insurance months
+		hazardEscrowed: true, // If hazard insurance is escrowed
+		tax: 0, // Real Estate taxes monthly payment
+		taxEscrow: 0, // Months to escrow
+		taxEscrowed: true, // If tax is escrowed
 		program: "",
-		pud: true,
+		pud: true, // Property under development
 		zip: ''
-	}
+}
+
+const loans = [
+	Object.assign({}, example),
+	Object.assign(Object.assign({}, example), {title: "Another One"})
 ]
 
 const estimate = {
@@ -178,6 +217,7 @@ function del() {
 	}
 }
 
+// Changes loan.ltv's <input> and data() values, then syncs with data.amount
 function setLtv(e) {
 	let ltv = strip(e)
 	let loan = this.loans[this.sel]
@@ -191,6 +231,7 @@ function setLtv(e) {
 	loan.amount = Math.round(ltv / 100 * this.estimate.price)
 }
 
+// Changes loan.amount's <input> and data() values, then syncs with data.ltv
 function setAmount(e) {
 	let amount = strip(e)
 	let loan = this.loans[this.sel]