Quiero mostrar un mensaje de error cuando se este filtrando y no encuentre una propiedad que existe, también quiero incluir un spinner mientras busco los datos. Y si es posible una pequeña transición al mostrar los datos filtrados de las tarjetas.
Agradecería muchísimo la ayuda!
JS:
const filterProducts = [...document.querySelectorAll(".card")]; // cast to array type
const type = document.getElementById("select__type");
const category = document.getElementById("select__category");
const city = document.getElementById("select__city");
const fromField = document.querySelector(".filters__price--prev input");
const toField = document.querySelector(".filters__price--next input");
const getPrice = (str) => str.replace(/[\$ ,]/g, "");
document
.getElementById("properties__filters")
.addEventListener("change", function(e) {
const typ = type.value;
const cat = category.value;
const cit = city.value;
let from = +fromField.value;
let to = +toField.value;
if (to === 0) { to = Number.POSITIVE_INFINITY; }
console.log(typ, cat, cit);
filterProducts.forEach((card) => {
const price = getPrice(
card.querySelector(".content__price--money").textContent
);
console.log(from, price, to);
const show =
(typ === "." || card.dataset.type === typ) &&
(cat === "." || card.dataset.category === cat) &&
(cit === "." || card.dataset.city === cit) &&
from <= price &&
to >= price;
card.classList.toggle("hide", !show);
});
});