const cars = [
  {
    id: 1,
    plate: 'ABC123',
    name: 'Ford',
    model: 'Mustang',
    year: 2022
  },
  {
    id: 2,
    plate: 'DEF456',
    name: 'BMW',
    model: 'X5',
    year: 2021
  },
  {
    id: 3,
    plate: 'GHI789',
    name: 'Toyota',
    model: 'Camry',
    year: 2020
  },
  {
    id: 4,
    plate: 'JKL012',
    name: 'Honda',
    model: 'Civic',
    year: 2019
  },
  {
    id: 5,
    plate: 'MNO345',
    name: 'Nissan',
    model: 'Altima',
    year: 2018
  }
]

const template = (car) => {
  return `
    <div class="card m-3 text-center" style="width: 18rem;">
      
      <div class="card-body">
        <h3 class="card-title">${car.name}</h3>
        <p class="card-text">
          ${car.model}
        </p>
        <p class="card-text">
          ${car.year}
        </p>
        <p class="card-text">
          ${car.plate}
        </p>
      </div>
    </div>
  `
}

const carsContainer = document.getElementById('cars')
cars.forEach(car => {
  carsContainer.innerHTML += template(car)
})