buscador

<div style="font-family: 'MS Sans Serif', sans-serif; background-color: #c0c0c0; color: black; padding: 20px; border: 2px solid black; max-width: 700px; margin: 0 auto;">

<h2 style="font-size: 18px; margin-bottom: 10px;">🪴 Buscador de Fichas de Cultivo</h2>

<p>Elegí un cultivo y conocé cómo cuidarlo según la temporada y su categoría.</p>

<label for="nombre">Nombre del cultivo:</label><br>

<input type="text" id="nombre" placeholder="Ej: Albahaca" style="width: 100%; padding: 4px; margin-bottom: 10px;"><br>

<label for="categoria">Categoría:</label><br>

<select id="categoria" style="width: 100%; padding: 4px; margin-bottom: 10px;">

<option value="">-- Todas --</option>

<option value="Aromáticas">Aromáticas</option>

<option value="Hortalizas de raíz">Hortalizas de raíz</option>

<option value="Flores comestibles">Flores comestibles</option>

</select><br>

<label for="estacion">Estación de siembra:</label><br>

<select id="estacion" style="width: 100%; padding: 4px; margin-bottom: 10px;">

<option value="">-- Todas --</option>

<option value="Primavera">Primavera</option>

<option value="Verano">Verano</option>

<option value="Otoño">Otoño</option>

<option value="Invierno">Invierno</option>

</select><br>

<button onclick="filtrarCultivos()" style="padding: 6px 12px; border: 2px outset #ccc; background-color: #e0e0e0; cursor: pointer;">🔍 Buscar</button>

<div id="resultados" style="margin-top: 20px;"></div>

<script>

const cultivos = [

{

nombre: "Albahaca",

nombre_cientifico: "Ocimum basilicum",

categoria: "Aromáticas",

temporada: ["Primavera", "Verano"],

imagen: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Basilikum1.jpg/120px-Basilikum1.jpg"

},

{

nombre: "Zanahoria",

nombre_cientifico: "Daucus carota",

categoria: "Hortalizas de raíz",

temporada: ["Otoño", "Invierno"],

imagen: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Carrot_Daucus_carota_Subsp._sativus_2007-1.jpg/120px-Carrot_Daucus_carota_Subsp._sativus_2007-1.jpg"

},

{

nombre: "Caléndula",

nombre_cientifico: "Calendula officinalis",

categoria: "Flores comestibles",

temporada: ["Primavera", "Verano"],

imagen: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Calendula_officinalis_002.JPG/120px-Calendula_officinalis_002.JPG"

}

];

function filtrarCultivos() {

const nombre = document.getElementById('nombre').value.toLowerCase();

const categoria = document.getElementById('categoria').value;

const estacion = document.getElementById('estacion').value;

const contenedor = document.getElementById('resultados');

contenedor.innerHTML = '';

const resultados = cultivos.filter(c => {

const coincideNombre = c.nombre.toLowerCase().includes(nombre);

const coincideCategoria = categoria ? c.categoria === categoria : true;

const coincideEstacion = estacion ? c.temporada.includes(estacion) : true;

return coincideNombre && coincideCategoria && coincideEstacion;

});

if (resultados.length === 0) {

contenedor.innerHTML = '<p>No se encontraron resultados.</p>';

return;

}

resultados.forEach(c => {

const ficha = document.createElement('div');

ficha.style = "border: 2px solid black; background: white; padding: 10px; margin-bottom: 10px; overflow: auto;";

ficha.innerHTML = `

<img src="${c.imagen}" alt="${c.nombre}" style="float: right; width: 100px; margin-left: 10px;">

<h3 style="margin: 0;">${c.nombre}</h3>

<p><strong>Nombre científico:</strong> ${c.nombre_cientifico}</p>

<p><strong>Categoría:</strong> ${c.categoria}</p>

<p><strong>Temporada:</strong> ${c.temporada.join(", ")}</p>

`;

contenedor.appendChild(ficha);

});

}

</script>

</div>