car-audio-fitment-api/examples/build-a-ymm-dropdown.html at main · rokasmen/car-audio-fitment-api · GitHub

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
<!DOCTYPE html>
<!--
  A working Year/Make/Model picker in one file, using only the free taxonomy
  endpoints. No key, no build step — open it in a browser.
-->
<meta charset="utf-8" />
<title>YMM picker — free vehicle taxonomy</title>
<style>
  body{font:16px/1.5 system-ui;margin:40px auto;max-width:640px;padding:0 20px}
  select{font-size:16px;padding:9px 11px;margin:4px 6px 4px 0;min-width:170px}
  pre{background:#0f1524;color:#e2e8f0;padding:16px;border-radius:10px;overflow:auto}
</style>
<h1>Which car?</h1>
<select id="make"><option>Loading…</option></select>
<select id="model" disabled></select>
<select id="year" disabled></select>
<pre id="out">Pick a vehicle.</pre>

<script type="module">
const API = "https://ymmfit.com/v1";
const $ = (id) => document.getElementById(id);
const fill = (el, items, label, value) => {
  el.innerHTML = "";
  el.append(new Option(label, ""));
  for (const i of items) el.append(new Option(i.text, i.value));
  el.disabled = false;
};

const { makes } = await (await fetch(`${API}/makes`)).json();
fill($("make"), makes.map((m) => ({ text: m.make, value: m.slug })), "Make");

$("make").onchange = async () => {
  const { models } = await (await fetch(`${API}/models?make=${$("make").value}`)).json();
  fill($("model"), models.map((m) => ({ text: m.model, value: m.slug })), "Model");
  $("model").dataset.years = JSON.stringify(Object.fromEntries(models.map((m) => [m.slug, m.years])));
  $("year").disabled = true;
};

$("model").onchange = () => {
  const years = JSON.parse($("model").dataset.years)[$("model").value] ?? [];
  fill($("year"), [...years].reverse().map((y) => ({ text: y, value: y })), "Year");
};

$("year").onchange = async () => {
  const q = `make=${$("make").value}&model=${$("model").value}&year=${$("year").value}`;
  const res = await fetch(`${API}/parts?${q}`);
  const data = await res.json();
  // 403 means the make is in the catalog but its fitment needs a key —
  // that is different from "nothing fits", so say so.
  $("out").textContent = res.ok
    ? JSON.stringify(data, null, 2)
    : `${data.error}: ${data.message}`;
};
</script>