-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathestimate.html
166 lines (148 loc) · 7.04 KB
/
estimate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Trade-In Appraiser</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Car Trade-In Appraiser</h1>
<p class="text-center">Enter your car details manually or provide a VIN to get an estimated trade-in value.</p>
<!-- Tabs for Manual or VIN Entry -->
<ul class="nav nav-tabs" id="appraiserTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="manual-tab" data-bs-toggle="tab" data-bs-target="#manual" type="button" role="tab">Manual Entry</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="vin-tab" data-bs-toggle="tab" data-bs-target="#vin" type="button" role="tab">VIN Entry</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content mt-3" id="appraiserTabsContent">
<!-- Manual Entry Tab -->
<div class="tab-pane fade show active" id="manual" role="tabpanel">
<form id="manualForm">
<div class="mb-3">
<label for="make" class="form-label">Car Make</label>
<input type="text" id="make" class="form-control" placeholder="e.g., Toyota" required>
</div>
<div class="mb-3">
<label for="model" class="form-label">Car Model</label>
<input type="text" id="model" class="form-control" placeholder="e.g., Camry" required>
</div>
<div class="mb-3">
<label for="year" class="form-label">Year</label>
<input type="number" id="year" class="form-control" placeholder="e.g., 2020" required>
</div>
<div class="mb-3">
<label for="mileage" class="form-label">Mileage</label>
<input type="number" id="mileage" class="form-control" placeholder="e.g., 30000" required>
</div>
<div class="mb-3">
<label for="condition" class="form-label">Condition</label>
<select id="condition" class="form-select" required>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="fair">Fair</option>
<option value="poor">Poor</option>
</select>
</div>
<button type="submit" class="btn btn-primary w-100">Get Trade-In Value</button>
</form>
</div>
<!-- VIN Entry Tab -->
<div class="tab-pane fade" id="vin" role="tabpanel">
<form id="vinForm">
<div class="mb-3">
<label for="vinInput" class="form-label">Vehicle Identification Number (VIN)</label>
<input type="text" id="vinInput" class="form-control" placeholder="e.g., 1HGCM82633A123456" required>
</div>
<button type="submit" class="btn btn-primary w-100">Get Trade-In Value</button>
</form>
</div>
</div>
<!-- Result Section -->
<div id="result" class="mt-4"></div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
// Utility: Validate VIN format
function isValidVIN(vin) {
return /^[A-HJ-NPR-Z0-9]{17}$/.test(vin);
}
// Utility: Display Result
function displayResult(data) {
const { make, model, year, trade_in_value } = data;
$('#result').html(`
<div class="alert alert-success">
<h4>Estimated Trade-In Value:</h4>
<p><strong>Make:</strong> ${make}</p>
<p><strong>Model:</strong> ${model}</p>
<p><strong>Year:</strong> ${year}</p>
<h5><strong>Value:</strong> $${trade_in_value}</h5>
</div>
`);
}
// Utility: Display Error
function displayError(message) {
$('#result').html(`
<div class="alert alert-danger">
<p>${message}</p>
</div>
`);
}
// Fetch Trade-In Value Function
function fetchTradeInValue(data) {
const apiUrl = 'https://api.kbb.com/v1/vehicle'; // Replace with actual KBB API endpoint
const apiKey = 'YOUR_API_KEY'; // Replace with your API key
$.ajax({
url: apiUrl,
method: 'GET',
headers: {
'Authorization': `Bearer ${apiKey}`
},
data: data,
success: function (response) {
displayResult(response);
},
error: function (xhr) {
const errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Failed to fetch trade-in value. Please try again later.';
displayError(errorMessage);
}
});
}
// Manual Entry Form Submission
$('#manualForm').on('submit', function (e) {
e.preventDefault();
const make = $('#make').val().trim();
const model = $('#model').val().trim();
const year = $('#year').val().trim();
const mileage = $('#mileage').val().trim();
const condition = $('#condition').val();
if (!make || !model || !year || !mileage || !condition) {
displayError('Please fill in all fields correctly.');
return;
}
fetchTradeInValue({ make, model, year, mileage, condition });
});
// VIN Form Submission
$('#vinForm').on('submit', function (e) {
e.preventDefault();
const vin = $('#vinInput').val().trim();
if (!vin || !isValidVIN(vin)) {
displayError('Please enter a valid 17-character VIN.');
return;
}
fetchTradeInValue({ vin });
});
});
</script>
</body>
</html>