Ejercicio propuesto: Texto o imágenes

assignmentDescripción del ejercicio

Crea un formulario interactivo que permita cambiar dinámicamente entre búsqueda de texto e imágenes, mostrando filtros específicos para cada tipo.

checklistRequisitos del formulario

swap_horiz

Selector para cambiar entre búsqueda de texto e imágenes

text_fields

Campo de texto principal para términos de búsqueda

filter_list

Filtros específicos para búsqueda de texto

image

Filtros específicos para búsqueda de imágenes

code

JavaScript para mostrar/ocultar filtros según selección

visibility_off

Parámetros ocultos para configurar el tipo de búsqueda

codeEstructura base del formulario

<form action="/buscar" method="get">
  <!-- Selector de tipo de búsqueda -->
  <div class="search-type-selector">
    <input type="radio" id="text-search" name="search-type" value="text" checked>
    <label for="text-search">Texto</label>
    <input type="radio" id="image-search" name="search-type" value="image">
    <label for="image-search">Imágenes</label>
  </div>

  <!-- Campo de búsqueda principal -->
  <input type="text" name="q" placeholder="Introduce tu búsqueda..." required>

  <!-- Filtros para búsqueda de texto -->
  <div id="text-filters">
    <!-- Campos de filtrado para texto aquí -->
  </div>

  <!-- Filtros para búsqueda de imágenes -->
  <div id="image-filters" class="hidden">
    <!-- Campos de filtrado para imágenes aquí -->
  </div>

  <button type="submit">Buscar</button>
</form>

lightbulbConsejos para el ejercicio

  • check_circleUsa JavaScript para mostrar/ocultar filtros según el tipo de búsqueda
  • check_circleImplementa transiciones suaves al cambiar entre tipos
  • check_circleAsegúrate de que el formulario sea accesible con teclado
  • check_circleGuarda la preferencia del usuario en localStorage