//Variables
//Campos del formulario
const marca = document.querySelector('#marca');
const year = document.querySelector('#year'); //El select donde voy a poner los años
const minimo = document.querySelector('#minimo');
const maximo = document.querySelector('#maximo');
const puertas = document.querySelector('#puertas');
const transmision = document.querySelector('#transmision');
const color = document.querySelector('#color');
//Contenedor para los resultados
const resultado = document.querySelector('#resultado'); //El div donde mostreré los datos y los resultados de las búsquedas
//Numeración de los últimos 10 años
const max = new Date().getFullYear(); //Método para obtener el año actual
const min = max - 10; //El años mínimo es el año máximo menos 10
//El objeto que se va a llena con los datos que seleccione el usuario
const datosBusqueda = {
marca: '',
year: '',
minimo: '',
maximo: '',
puertas: '',
transmision: '',
color: ''
}
//Eventos
//Evento iniciar para cargar los datos completos en la lista
document.addEventListener('DOMContentLoaded', () => { //Preparo el código para que muestre todos los autos de la base de datos cuando cargue la página
mostrarAutos(autos); //En un proyecto anterior se usó el DOMCL para inicializar un formulario, cosa que tenía sentido, pero
//aquí por qué no mostrarlo por defaul (de alguna manera), o es eso lo q se está haciendo
llenarYears(); //Para llenar la lista de años de los autmóviles automáticamente
})
//Eventos cuando se seleccione algo en los selectores, todos mandarán a llamar a la función filtrarAuto y a colocar el valor en el objeto datosBusqueda
marca.addEventListener('change', e => {
datosBusqueda.marca = e.target.value;
filtrarAuto();
});
year.addEventListener('change', e => {
datosBusqueda.year = parseInt(e.target.value);
filtrarAuto();
});
minimo.addEventListener('change', e => {
datosBusqueda.minimo = e.target.value;
filtrarAuto();
});
maximo.addEventListener('change', e => {
datosBusqueda.maximo = e.target.value;
filtrarAuto();
})
puertas.addEventListener('change', e => {
datosBusqueda.puertas = parseInt(e.target.value);
filtrarAuto();
})
transmision.addEventListener('change', e => {
datosBusqueda.transmision = e.target.value;
filtrarAuto();
})
color.addEventListener('change', e => {
datosBusqueda.color = e.target.value;
filtrarAuto();
})
//<<<<<<<Funciones>>>>>>>>>>
//Para mostrar los datos del arreglo auto al cargar la página
function mostrarAutos(autos) { //Iterando sobre el array autos para mostrar un string párrafo (datosHTML) en el div resultado por cada dato objeto
//El parámetro de la función tiene el mismo nombre del arreglo global que funciona como base de datos, pero podría ser otro
limpiarHTML();
autos.forEach( auto => { //Por cada dato del array auto
const { marca, modelo, year, puertas, transmision, precio, color } = auto; //Crea estas variables a modo destructuring
const datosHTML = document.createElement('p'); //Creame un html tipo párrafo y métele el siguiente texto usando las variables anteriores
datosHTML.textContent = `${marca} ${modelo} -- ${year} - ${puertas} puertas - Transmisión: ${transmision} - Precio: ${precio} - Color: ${color} `;
resultado.appendChild(datosHTML); //Móntame ese texto en el div resultado y vamos con el otro
})
}
//Crear la lista de los últimos 10 años
function llenarYears() {
for(i = max; i >= min; i-- ) { //itero sobre los años con los que estoy trabajando
const optionYear = document.createElement('option'); //Creo el elemento html option que va a ir insertado en el select de años o years
optionYear.value = i; //Le asigno a cada uno el value del año
optionYear.textContent = i; //Le asigno a cada uno el texto que es también el año, pero esto está en string y no number
year.appendChild(optionYear); //Meto eso en el select conrespondiente a los años
}
}
function limpiarHTML() { //Un método de limpieza clásico de elementos HTML
while(resultado.firstChild) { //Mientras el querySelector indicado tenga hijos, borra el primer hijo hasta que ya no halla más hijos
resultado.removeChild(resultado.firstChild);
}
}
//Para filtrar el arreglo auto inicial en base a las selecciones en los campos de búsqueda
function filtrarAuto() { //Función de alto nivel, manda a llamar a otras funciones
const resultado = autos.filter( filtrarMarca ).filter( filtrarYear ).filter( filtrarMinimo ).filter( filtrarMaximo ).filter( filtrarPuertas ).filter( filtrarTransmision ).filter( filtrarColor );
// const resultado = autos.filter( datosAutos => datosAutos.marca === datosBusqueda.marca );
// const resultado = autos.filter( datosAutos => datosAutos );
console.log(resultado);
if(resultado.length) {
mostrarAutos(resultado); //Se llama la función y se le pasa ahora si otro arreglo con un nombre diferene a auto
}else{
noResultado();
}
}
function filtrarMarca(datosAutos) {
const { marca } = datosBusqueda;
if(marca) {
return datosAutos.marca === marca;
}
return datosAutos;
}
function filtrarYear(datosAutos) {
const { year } = datosBusqueda;
if(year) {
return datosAutos.year === year;
}
return datosAutos;
}
function filtrarMinimo(datosAutos) {
const { minimo } = datosBusqueda;
if(minimo) {
return datosAutos.precio >= minimo; //Como no estamos en modo estricto el código puede comparar con operadores lógicos un string y un número
}
return datosAutos;
}
function filtrarMaximo(datosAutos) {
const { maximo } = datosBusqueda;
if(maximo) {
return datosAutos.precio <= maximo;
}
return datosAutos;
}
function filtrarPuertas(datosAutos) {
const { puertas } = datosBusqueda;
if(puertas) {
return datosAutos.puertas === puertas;
}
return datosAutos;
}
function filtrarTransmision(datosAutos) {
const { transmision } = datosBusqueda;
if(transmision) {
return datosAutos.transmision === transmision;
}
return datosAutos;
}
function filtrarColor(datosAutos) {
const { color } = datosBusqueda;
if(color) {
return datosAutos.color === color;
}
return datosAutos;
}
function noResultado() {
limpiarHTML();
const noResultado = document.createElement('div');
noResultado.classList.add('alerta', 'error');
noResultado.textContent = 'No hay resultados';
resultado.appendChild(noResultado);
}
const autos = [
{
marca: 'BMW',
modelo: 'Serie 3',
year: 2020,
precio: 30000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A4',
year: 2020,
precio: 40000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2015,
precio: 20000,
puertas: 2,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A6',
year: 2020,
precio: 35000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2016,
precio: 70000,
puertas: 4,
color: 'Rojo',
transmision: 'automatico'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2015,
precio: 25000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Chevrolet',
modelo: 'Camaro',
year: 2018,
precio: 60000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2019,
precio: 80000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2020,
precio: 40000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A3',
year: 2017,
precio: 55000,
puertas: 2,
color: 'Negro',
transmision:
'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2020,
precio: 25000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2018,
precio: 45000,
puertas: 4,
color: 'Azul',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2019,
precio: 90000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2017,
precio: 60000,
puertas: 2,
color: 'Negro',
transmision: 'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2015,
precio: 35000,
puertas: 2,
color: 'Azul',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 3',
year: 2018,
precio: 50000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2017,
precio: 80000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2018,
precio: 40000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A4',
year: 2016,
precio: 30000,
puertas: 4,
color: 'Azul',
transmision: 'automatico'
}
];
