script.js

async function getCars() {
  try {
    const brand = document.getElementById("brand").value;

    const res = await fetch(`https://vpic.nhtsa.dot.gov/api/vehicles/GetModelsForMake/${brand}?format=json`);
    const data = await res.json();

    console.log(data);

    const resultDiv = document.getElementById("result");
    resultDiv.innerHTML = "";

    const cars = data.Results;

    if (!cars || cars.length === 0) {
      resultDiv.innerHTML = "<p>No cars found</p>";
      return;
    }

    cars.slice(0, 10).forEach(car => {
      const modelName = car.Model_Name;

      const div = document.createElement("div");

      div.innerHTML = `
        <h3>${modelName}</h3>
        <img 
          src="https://cdn.imagin.studio/getimage?customer=img&make=${brand}&modelFamily=${modelName}"
          width="300"
          onerror="this.src='https://via.placeholder.com/300'"
        />
      `;

      resultDiv.appendChild(div);
    });

  } catch (error) {
    console.log(error);
    document.getElementById("result").innerHTML = "<p>Error loading data</p>";
  }
}