<script>
const valuesArr = [
{
Id: 1,
title: "BMW",
img: "./img/bmw.jpeg",
},
{
Id: 2,
title: "Mercedes",
img: "./img/mercedes.jpeg",
},
{
Id: 3,
title: "Fiat",
img: "./img/fiat.jpeg",
},
];
const selectChange = document.querySelector(".select_change");
const cardContainer = document.querySelector(".card_container");
valuesArr.forEach(car => {
selectChange.innerHTML += `
<option value="${car.title}">${car.title}</option>
`;
});
function showCars(selectedValue) {
if (selectedValue === "All") {
cardContainer.innerHTML = "";
valuesArr.forEach(car => {
cardContainer.innerHTML += `
<div class="card_child">
<h1>${car.title}</h1>
<img src="${car.img}">
</div>
`;
});
} else {
const selectedCar = valuesArr.find(car => car.title === selectedValue);
if (selectedCar) {
cardContainer.innerHTML = `
<div class="card_child">
<h1>${selectedCar.title}</h1>
<img src="${selectedCar.img}">
</div>
`;
}
}
}
showCars(selectChange.value);
selectChange.addEventListener("change", () => {
showCars(selectChange.value);
});
</script>