Add borrower input fields

assets/main.css

@@ -143,7 +143,6 @@ menu.sidebar svg {
 }
 
 #home .announce {
-	/* background: grey; */
 	min-height: 150px;
 	border: 1px solid var(--outline);
 	/* border-radius: 4px; */
@@ -190,16 +189,25 @@ section.loans-list {
 	color: black;
 }
 
+section.form input, section.form select {
+	border: 2px solid var(--outline);
+	border-radius: 3px;
+}
+
 section.radios {
 	display: grid;
 	grid-template-columns: 50px 1fr;
+	justify-content: center;
 	row-gap: 20px;
-	/* border-bottom: 1px solid var(--text-lightest); */
-	/* padding-bottom: 50px; */
-	/* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
-	/* border-radius: 3px; */
+	max-width: 250px;
 }
 
+section.inputs {
+	display: flex;
+	flex-flow: column;
+	max-width: 250px;
+	row-gap: 15px;
+}
 section.radios h3 {
 	grid-column: 1 / 3;
 }

components/new.vue

@@ -21,6 +21,19 @@ fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
 
 </section>
 
+<section class="form inputs">
+<h3>Borrower</h3>
+<label>Number of Borrowers</label>
+<input :value="loans[sel].borrowers"
+@input="(e) => loans[sel].borrowers = strip(e)">
+<label>Credit Score</label>
+<input :value="loans[sel].creditScore"
+@input="(e) => loans[sel].creditScore = strip(e)">
+<label>Monthly Income ($)</label>
+<input :value="loans[sel].mIncome"
+@input="(e) => loans[sel].mIncome = strip(e)">
+</section>
+
 <section class="radios form">
 <h3>Transaction Type</h3>
 <input type="radio" name="transaction_type" value="transaction"
@@ -33,7 +46,7 @@ selected="loans[sel].transaction == 1">
 <label>Refinance</label>
 </section>
 
-<section class="form">
+<section class="form inputs">
 <h3>Property Details</h3>
 <label>Price ($)</label>
 <input :value="loans[sel].price" @input="setPrice">
@@ -44,7 +57,6 @@ selected="loans[sel].transaction == 1">
 	<option value="lorise">Lo-rise (4 stories or less)</option>
 	<option value="hirise">Hi-rise (over 4 stories)</option>
 </select>
-<label></label>
 </section>
 
 <section class="radios form">
@@ -60,7 +72,7 @@ selected="loans[sel].transaction == 1">
 <label>USDA</label>
 </section>
 
-<section class="form">
+<section class="form inputs">
 <h3>Loan Details</h3>
 <label>Loan Term (years)</label>
 <input :value="loans[sel].term"
@@ -76,9 +88,9 @@ selected="loans[sel].transaction == 1">
 <label>Loan Amount ($)</label>
 <input :value="loans[sel].amount"
 @input="setAmount">
-<label>Housing Expense DTI (%)</label>
+<label>Housing Expense DTI (%) - Optional</label>
 <input :value="loans[sel].housingDti" @input="setHousingDti">
-<label>Total DTI (%)</label>
+<label>Total DTI (%) - Optional</label>
 <input :value="loans[sel].dti" @input="setDti">
 </section>
 
@@ -86,8 +98,13 @@ selected="loans[sel].transaction == 1">
 </template>
 
 <script>
+// Strips non-digits from an input box event and returns it's rounded integer
+function strip(e) {
+	return parseInt(e.target.value.replace(/\D/g, '') || 0)
+}
+
 function setLtv(e) {
-	let ltv = parseInt(e.target.value.replace(/[^0-9]/g, '') || 0)
+	let ltv = strip(e)
 	let loan = this.loans[this.sel]
 	if (!loan.price) return
 
@@ -99,7 +116,7 @@ function setLtv(e) {
 }
 
 function setAmount(e) {
-	let amount = parseInt(e.target.value.replace(/[^0-9]/g, '') || 0)
+	let amount = strip(e)
 	let loan = this.loans[this.sel]
 	if (!loan.price) return
 
@@ -111,16 +128,14 @@ function setAmount(e) {
 
 function setPrice(e) {
 	let loan = this.loans[this.sel]
-	let value = 
-	parseInt(e.target.value.replace(/[^0-9]/g, ''))
-	// Should check for NaN after backspace
+	let value = strip(e)
 
 	loan.price = value
 	loan.amount = Math.round(loan.ltv / 100 * value)
 }
 
 function setDti(e) {
-	let dti = parseInt(e.target.value.replace(/[^0-9]/g, '') || 0)
+	let dti = strip(e)
 	let loan = this.loans[this.sel]
 	if (!loan.price) return
 
@@ -130,7 +145,7 @@ function setDti(e) {
 }
 
 function setHousingDti(e) {
-	let housingDti = parseInt(e.target.value.replace(/[^0-9]/g, '') || 0)
+	let housingDti = strip(e)
 	let loan = this.loans[this.sel]
 	if (!loan.price) return
 
@@ -148,6 +163,9 @@ const loans = [
 		price: 0,
 		term: 0,
 		ltv: 0,
+		borrowers: 0,
+		creditScore: 0,
+		mIncome: 0,
 		dti: 0,
 		housingDti: 0,
 		amount: 0,
@@ -163,6 +181,9 @@ const loans = [
 		price: 0,
 		term: 0,
 		ltv: 0,
+		borrowers: 0,
+		creditScore: 0,
+		mIncome: 0,
 		dti: 0,
 		housingDti: 0,
 		program: "",
@@ -177,7 +198,7 @@ const propertyTypes = [
 
 export default {
 	methods: {
-		setPrice, setLtv, setAmount, setDti, setHousingDti
+		setPrice, setLtv, setAmount, setDti, setHousingDti, strip
 	},
 	props: ['user'],
 	data() {