ivan rivalcoba - freeCodeCamp.org

Como crear un formulario responsivo con funcionalidad de filtro usando HTML, CSS y JavaScript

ivan rivalcoba — Tue, 10 May 2022 03:53:27 +0000

Artículo original escrito por: Kingsley Ubah
Artículo original: How to Build a Responsive Form with Filter Functionality Using HTML, CSS, and JavaScript
Traducido y adaptado por: Ivan Rivalcoba con la colaboración de Janine Rodriguez

La gran mayoría de los sitios que muestran una lista de datos mediante una tabla típicamente implementan algún tipo de funcionalidad de filtrado de datos. Esto le permite al usuario filtrar los elementos relevantes de una lista en función de una entrada de texto proveniente de algún formulario.

En este breve tutorial vamos a construir una tabla responsiva que incorpora la funcionalidad de filtrado de datos, el resultado lucirá de la siguiente manera:

Una tabla responsiva y filtrable por nombre de lenguaje de programación

La tabla contendrá una lista de desarrolladores. Cada fila mostrará un nombre, edad y lenguaje de programación. Cuando un usuario escriba en el campo de entrada de texto de la tabla, la tabla mostrará una lista filtrando las filas que estén relacionadas con el valor ingresado en el campo de entrada.

Durante el proceso de construcción de este proyecto, aprenderás sobre las propiedades CSS, así como el acceso y manipulación del DOM con JavaScript.

Puedes acceder al código de ejemplo en español desde CodeSandbox o del artículo original desde CodePen.

Primeros pasos

Necesitarás crear 3 archivos en tu carpeta del proyecto. Estos son index.html para el marcado, styles.css para los estilos, e index.js para el script.




  
  
  
  Tabla Filtrable

Asegúrate de enlazar tus archivos de hoja de estilos y archivos de JavaScript al documento HTML tal y como se ha mostrado en el código anterior.

Marcado HTML para la tabla

Agregar el siguiente marcado al interior de las etiquetas body:


    
    
        
          
            Nombre
            Edad
            Lenguaje
          
        
        
          
            Rey
            32
            JavaScript
          
          
            Samuel
            22
            Python
          
          
            Alegra
            28
            Ruby
          
          
            Juan
            29
            Python
          
          
            Daniel
            40
            JavaScript
          
          
            Maria
            21
            C
          
          
            David
            26
            JavaScript
          
          
            Krely
            31
            React
          
          
            Cleo
            43
            Java
          
          
            Pedro
            19
            Vue
          
          
            Jorge
            59
            Cobol
          
          
            Juanes
            29
            JavaScript
          
          
            Ernesto
            22
            PHP
          
          
            Sandra
            29
            R
          
          
            Verison
            34
            React Native
          
          
            Marta
            30
            React

Nombre	Edad	Lenguaje
Rey	32	JavaScript
Samuel	22	Python
Alegra	28	Ruby
Juan	29	Python
Daniel	40	JavaScript
Maria	21	C
David	26	JavaScript
Krely	31	React
Cleo	43	Java
Pedro	19	Vue
Jorge	59	Cobol
Juanes	29	JavaScript
Ernesto	22	PHP
Sandra	29	R
Verison	34	React Native
Marta	30	React

El primer elemento que encontraremos en el código es un campo de entrada de texto, usaremos este campo para recibir los datos del usuario.

Seguido de eso tenemos la tabla. La tabla consiste en una cabeza (thead) y un cuerpo (tbody). La cabeza de la tabla tiene una sola fila (tr) de datos, estos datos formarán el encabezado de la tabla. El cuerpo de la tabla está compuesto por 16 filas de datos, cada una de ellas contiene los siguientes campos: nombre, edad y lenguaje de programación.

Tanto el campo de texto como la tabla están envueltas en una etiqueta div. Esta organización ayudará con la alineación de los elementos mediante una hoja de estilos que veremos más adelante.

Salva los archivos y abre la página en un navegador, deberás ver el siguiente resultado:

Tabla HTML

Como estilizar la Tabla con CSS

Ahora es momento de aplicar algunos estilos a la tabla. Primeramente, estableceremos los estilos base de la siguiente manera:

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");

/* Se retira el margen y el padding al rededor del body. Se establece la altura del body al mismo tamaño del alto de la pantalla. Se alinea todo al centro, tanto en el eje horizontal como en el eje vertical*/

body {
  margin: 0;
  height: 100vh;
  padding: 0;
  font-family: "lato", sans-seriff;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

/* Se remueven los bordes del input. Se establece un ancho igual que el elemento padre y se establece un margen en la parte inferior */

#searchInput {
  border: none;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
}

/* Cuando el input gane el foco, se agregará un borde azul en la parte inferior */

#searchInput:focus {
  border-bottom: 2px solid #4575b6;
}

Como se ve a continuación la tabla se alineará al centro.

Para hacer que la tabla luzca aún mejor, agregaremos los siguientes estilos:

/* Establece el ancho del contenedor de la tabla (div) en un 80% del ancho de la ventana del navegador y el alto a un 100% del alto de la ventana del navegador. `vh` y `vw` hace responsiva a la table debido a que la escala proporcionalmente al tamaño de la ventana del navegador. Además, establece un margen de 20px en la parte superior y en la parte inferior */
.app {
  width: 80vw;
  height: 100vh;
  margin: 20px 0;
}

/* Colapsa todos los bordes que separan a cada celda. La tabla ocupa todo el ancho de ".app", además se establece una sobra gris alrededor de la tabla */
table {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 5px 7px gray;
}

/* Establece una sombra en la cabeza de la tabla */
thead {
  box-shadow: 0px 0px 10px gray;
}

/* Agrega algo de espacio al rededor del encabezado de la tabla. Alinea el texto a la dereche y lo convierte a mayúsculas */

th {
  padding: 1rem 3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}

/* Agrega un padding en cada celda */
td {
  padding: 0.5rem 3rem;
  font-size: 1rem;
}

/* Crea una alternancia de colores a lo largo de las filas de la tabla. Establece en color azul todas las filas pares (2, 4, 6 ...) */

tr:nth-child(even) {
  background-color: #dee8f5;
}

Ahora nuestra tabla luce mucho mejor y es responsiva también.

La tabla ahora es responsiva

Como implementar la funcionalidad de filtrado con JavaScript.

La tabla de datos hasta este punto es meramente estática. Utilizando JavaScript, implementaremos la lógica para el filtrado de nombres en función de lo que el usuario escriba en la entrada de texto.

En tu archivo de script define una función llamada filtro. En las primeras tres líneas accederemos al valor de la entrada de texto del usuario, posterior a ello obtendremos la referencia del y la guardaremos en la variable nombres, finalmente accederemos al contenido de todas las filas de la tabla usando el contenido en mismo que está referenciado en la variable nombres.

Un aspecto importante para tener en cuenta es normalizar la entrada del usuario, para ello se aplicará una transformación a mayúsculas toda entrada que proporcione el usuario en la caja de texto (Si el usuario ingresa 'j' esta será transformada a 'J')

 /* Esta función recolectará la entrada del usuario
y tomando en cuenta dicha entrada mostrará u ocultará información 
de una fila en particular */

function filtro() {
    
  // Accede al texto de entrada y a varios elementos del DOM
  let valor = document.getElementById("searchInput").value.toUpperCase();
  let nombres = document.getElementById("names");
  let filas = nombres.getElementsByTagName("tr");

  // continua el código

El siguiente paso es iterar a través del arreglo de filas. Por cada fila accederemos a la última columna (columna del lenguaje de programación) y obtendremos el texto que contiene (valor actual).

for (i = 0; i < rows.length; i++) {
    let column = rows[i].getElementsByTagName("td")[2];
    let language = column.textContent;

    rows[i].style.display =
      language.toUpperCase().indexOf(value) > -1 ? "" : "none";
  }
}

document.getElementById("searchInput").addEventListener("keyup", filter);

Looping through the table rows

Si el contenido de la tabla en algunas de sus filas contiene cualquiera de los valores introducidos por el usuario desde la entrada de texto, las filas se mostrarán, en caso contrario se ocultarán. Para realizar esta operación usamos el operador ternario de asignación como una versión más corta de la sentencia condicional if.

Finalmente, agregamos un escuchador de eventos en la entrada, de modo que cada vez que una tecla es presionada, la función de filtrado será invocada.

A continuación, se presenta el código completo del script.

/* Esta función recolectará la entrada del usuario
y tomando en cuenta dicha entrada mostrará u ocultará información 
de una fila en particular */
function filtro() {
  // Accede al texto de entrada y a varios elementos del DOM
  let valor = document.getElementById("searchInput").value.toUpperCase();
  let nombres = document.getElementById("names");
  let filas = nombres.getElementsByTagName("tr");

  // Iteramos el arreglo de filas
  for(let i = 0; i < filas.length; i++){
    // Por cada fila se obtiene la referencia a la columna lenguaje
    let columnaLenguaje = filas[i].getElementsByTagName("td")[2];
    // Se extrae el texto de la columna lenguaje
    let lenguaje = columnaLenguaje.textContent;
    // Se muestra u oculta la fila si la entrada de texto
    // coincide con el texto de la columna lenguaje
    filas[i].style.display = lenguaje.toUpperCase().indexOf(valor) > -1 ? "" : "none";
  }
}

// Se agrega un escuchador de eventos a la entrada de texto
// para activar la función de filtrado cada vez que el usuario
// ingresa texto en la entrada
document.getElementById("searchInput").addEventListener("keyup", filtro);

La tabla final deberá lucir de la siguiente manera:

Vista final del formulario

En conclusión

Con tan solo HTML, CSS y JavaScript puedes crear elementos realmente elegantes con funciones avanzadas.

Espero que hayas aprendido un par de cosas con este ejercicio. Una vez más, puedes revisar el código aquí y modificarlo a tu gusto.

Gracias por llegar hasta aqui conmigo.

El Split de JavaScript – Como dividir una cadena de carácteres en un arreglo con JS

ivan rivalcoba — Fri, 01 Oct 2021 13:00:00 +0000

Artículo original escrito por Tapas Adhikari
Artículo original JavaScript Split – How to Split a String into an Array in JS
Traducido y adaptado por Ivan Rivalcoba

De forma general, en un lenguaje de programación un string representa una secuencia de caracteres.

Vamos a ver un ejemplo de la creación de un string a partir de la secuencia de caracteres: "¡Si, Tú puedes hacerlo!". En JavaScript podemos crear un string de diversas formas:

Usando un literal string como un tipo de dato primitivo

const msg = "¡Si, Tu puedes hacerlo!";

Usando el constructor String() como un objeto

const msg = new String("¡Si, Tu puedes hacerlo!");

Un hecho interesante acerca de las cadenas de caracteres en JavaScript es que podemos acceder a los caracteres individuales de una cadena usando su índice. El índice del primer carácter es 0, de modo que para acceder al siguiente carácter basta con incrementar este índice de uno en uno. Por lo tanto, nosotros podemos acceder a cada uno de los caracteres de un string de la siguiente manera:

let str = "¡Si, Tu puedes hacerlo!";

console.log(str[0]); // ¡
console.log(str[1]); // S
console.log(str[2]); // i
console.log(str[3]); // ,
...
console.log(str[10]); // e

La siguiente imagen nos permite visualizar este hecho:

Accediendo a los carácteres individuales de una cadena por su índice

Además de su habilidad para acceder a los caracteres individuales de una cadena por medio de sus índices, JavaScript también ofrece una gran variedad de métodos para manipular y acceder a los caracteres que forman parte de una cadena.

En este artículo aprenderemos acerca de un método disponible en las cadenas de caracteres llamado split(). Es mi deseo que disfrutes su lectura.

El método `split()` en JavaScript

El método split() divide (fragmenta) un string en dos o más sub cadenas usando un separador (divisor). El separador puede ser un solo carácter, otra cadena, o una expresión regular.

Una vez que se ha dividido la cadena en múltiples sub cadenas, el método split() sitúa las subdivisiones resultantes en una cadena que posteriormente es retornada como respuesta. Lo anterior es realizado sin modificar la cadena original.

Vamos a averiguar como funciona todo esto con un ejemplo. A continuación, se presenta una cadena de caracteres creada a partir de una literal string:

let mensaje = 'Soy un tipo feliz y afortunado';

Podemos llamar al método split() desde la cadena mensaje. En este ejemplo vamos a dividir la cadena usando como separador el carácter "espacio" (' '). En este caso el carácter espacio funciona como el separador o divisor.

// Dividiendo la cadena "mensaje" usando el carácter espacio
let arr = mensaje.split(' ');

// El arreglo
console.log(arr); // ["Soy", "un", "tipo", "feliz", "y", "afortunado"]


// Acceso a cada elemento del arreglo resultante
console.log(arr[0]); // "Soy"
console.log(arr[1]); // "un"
console.log(arr[2]); // "tipo"
console.log(arr[3]); // "feliz"
console.log(arr[4]); // "y",
console.log(arr[5]); // "afortunado"

El propósito principal del método split() es extraer partes de interés de la cadena original para posteriormente usar estas partes en alguna otra parte del programa.

Como dividir un `String` carácter por carácter.

Tú puedes dividir un string en sus correspondientes caracteres individuales usando como separador una cadena vacía (''). En el siguiente ejemplo, dividimos el mismo mensaje usando una cadena vacía. El resultado de la división será un arreglo conteniendo todos los caracteres en la cadena mensaje.

console.log(mensaje.split('')); // ["S", "o", "y", " ", "u", "n", " ", "t", "i", "p", "o", " ","f", "e", "l", "i", "z", " ", "y", " ", "a", "f", "o", "r", "t", "u", "n", "a", "d", "o"]

? Es importante notar en este punto que dividir una cadena vacía ('') usando una cadena vacía como separador regresara un arreglo vació. Esto te lo podrían preguntar en tu próxima entrevista de trabajo

''.split(''); // devuelve []

Como dividir una cadena de caracteres en un arreglo

En principio puedes invocar al método split() desde un string sin la necesidad de especificar un separador/divisor. Esto significa que el método split() se usa sin argumentos.

Cuando invocas el método split() desde un string sin un separador, este regresara como respuesta un arreglo con un elemento, dicho elemento es el contenido del string original.

let mensaje = 'Soy un tipo feliz y afortunado';
console.log(mensaje.split()); // regresa ["Soy un tipo feliz y afortunado"]

? Importante, llamar al método split() desde un string vacío ('') sin el uso de un separador regresará un arreglo con un string vacío. Por ningún motivo regresará un arreglo vacío.

Aquí se presentan dos ejemplos de modo que puedas ver la diferencia:

// Regresa como resultado un arreglo vacío
''.split(''); // regresa []

// Regresa como resultado un arreglo con un 'string' vacío
''.split() // regresa [""]

División de un `string` usando un carácter no presente en el `string`

Es común usar un carácter separador que forma parte del string que se quiere dividir. Puede llegar a ocurrir que pases al método split un separador que no forma parte del string que se desea dividir o dicho de otro modo que no este presente en el string. En ese caso el método split() retornará un array de salida con el string original como primer y único elemento.

En el siguiente ejemplo, el string "mensaje" no tiene el carácter coma (,). Apliquemos el método split usando como separador a la coma (,).

let mensaje = 'Soy un tipo feliz y afortunado';
console.log(mensaje.split(',')); // ["Soy un tipo feliz y afortunado"]

? Debes estar consiente de este comportamiento ya que puede ser de ayuda al depurar un error de este tipo, como por ejemplo pasar el separador equivocado al método split().

Como dividir usando un límite

Si crees que el método split() solo toma únicamente el separador como parámetro opcional, déjame decirte que aún hay más. También puedes pasar al método split() un parámetro opcional llamado límite.

string.split(separador, límite);

Como su nombre lo indica, el parámetro límite limita el número divisiones. Esto significa que el arreglo resultante solo tendrá un número de elementos igual al valor especificado en el parámetro límite.

En el ejemplo que se presenta a continuación, dividimos un string usando un espacio (' ') como separador. Además, pasamos el número4 como el límite. El método split() retorna una arreglo de cuatro elementos, ignorando el resto.

let mensaje = 'Soy un tipo feliz y afortunado';
console.log(mensaje.split(' ', 4)); // ["Soy", "un", "tipo", "feliz"]

Como dividir usando una regex

También podemos pasar una expresión regular (regex) como separador/divisor al método split(). Veamos el siguiente string:

let mensaje = 'El cielo es azul. ¡El pasto es verde! ¿Sabes de que color es el cielo?';

Vamos a dividir este string justo en el punto (.), en los signos de exclamación (¡, !), y en los signos de interrogación (¿, ?). Para ello podemos escribir una regex que identifique el lugar donde están presentes esos caracteres. Entonces pasamos la regex al método split() invocándola desde la cadena presentada anteriormente.

La salida deberá verse de la siguiente manera:

let sentencias = mensaje.split(/. ¡|! ¿|[?]/);
console.log(sentencias);

Dividiendo una cadena usando una regex

Puedes usar el parámetro limit para limitar la salida a solo los primeros tres elementos, justo de esta manera:

let sentencias = mensaje.split(/. ¡|! ¿|[?]/,3);
console.log(sentencias);

La salida deberá lucir de la siguiente manera:

Dividiendo una cadena usando una regex y un valor límite

? Si deseas incluir en el arreglo de salida los caracteres usados en la expresión regular, lo único que tienes que hacer es modificar un poco la regex. Usa paréntesis para capturar los caracteres coincidentes. La regex final debería quedar asi /(. ¡|! ¿|[?])/.

Como reemplazar los caracteres en un `string` usando el método `split()`

Tú puedes resolver problemas muy interesantes usando el método split() en combinación con otros métodos de string o array. Veamos uno aquí. Podría ser un caso de uso común reemplazar todas las ocurrencias de un carácter en un string con otro string.

Por ejemplo, tú querrías crear el id de un elemento HTML a partir del valor de su atributo name. El valor de name podría contener un espacio (' '), sin embargo en la especificación de HTML está establecido que el valor del id no debe contener espacios. Podemos hacer esto de la siguiente manera:

let nombre = 'Ivan Rivalcoba';
let subs = nombre.split(' ');
console.log(subs); // ["Ivan", "Rivalcoba"]

let union = subs.join('-');
console.log(union); // Ivan-Rivalcoba

Como podrás observar la variable nombre tiene almacenado al primer nombre (Ivan) y el apellido (Rivalcoba) separados por un espacio. Aquí lo que primero podemos hacer es dividir la cadena de caracteres usando el espacio como separador. Lo anterior nos regresará un arreglo con dos elementos, el primer nombre y el apellido de la siguiente manera: ['Ivan', 'Rivalcoba'].

Luego usamos el método join() para unir los elementos del arreglo usando el carácter -. El método join() regresa un string con cada uno de los elementos del arreglo original unidos por el carácter que le es pasado como argumento. El resultado final de todo este proceso es Ivan-Rivalcoba.

ES6: Como dividir con la desestructuración de un arreglo

ECMAScript2015 (ES6) introdujo una innovadora forma de extraer un elemento de un arreglo y asignarlo a una variable. Esta sintaxis inteligente es conocida como desestructuración de arreglos. Podemos usar el método split() para asignar la salida a una variable de una manera muy sencilla con menos código.

let nombre = 'Ivan Rivalcoba';
let [primerNombre, apellido] = nombre.split(' ');
console.log(primerNombre, apellido);

Aquí, dividimos la variable nombre usando el carácter espacio como separador. Posteriormente realizamos la asignación de los valores obtenidos como arreglo del split() a un par de variables (primerNombre y apellido) usando la sintaxis de desestructuración de un array.

Antes de finalizar...

? ¿Te gustaría programar y aprender junto conmigo? Puedes encontrar el mismo contenido en inglés en este canal de YouTube. Solo abre tu editor de código favorito y listo.

Espero hayas encontrado este artículo intuitivo, y que te haya ayudado entender de forma clara el método split() de JavaScript. Es importante que practiques y practiques continuamente de modo que puedas dominar estas técnicas. Puedes encontrar todos los códigos de ejemplo en su idioma original en code examples en mi respositorio de GitHub.

Conectemos. Puedes encontrarme activo en Twitter (@tapasadhikary). Siéntete en libertar de seguirme.