Ir al contenido principal

Prueba №13

Al resolver la tarea, no puedes usar frameworks y componentes listos. Nos interesa ver cómo puedes resolver tareas similares y crear algo desde cero.

Tareas de Fizz-buzz

Tarea №1

Escribir una función dscount que cuente la cantidad de veces que los caracteres s1 y s2 aparecen consecutivamente en la cadena, sin considerar mayúsculas y minúsculas. La función debe pasar al menos las siguientes pruebas:

"use strict";

// Yor code here ...
// Tu código de implementación de la función dscount
// ... //

// Para mayor comodidad, puedes usar estas pruebas:
try {
    test(dscount, ['ab___ab__', 'a', 'b'], 2);
    test(dscount, ['___cd____', 'c', 'd'], 1);
    test(dscount, ['de_______', 'd', 'e'], 1);
    test(dscount, ['12_12__12', '1', '2'], 3);
    test(dscount, ['_ba______', 'a', 'b'], 0);
    test(dscount, ['_a__b____', 'a', 'b'], 0);
    test(dscount, ['-ab-аb-ab', 'a', 'b'], 2);
    test(dscount, ['aAa', 'a', 'a'], 2);

    console.info("¡Congratulations! All tests passed.");
} catch(e) {
    console.error(e);
}

// Función simple de prueba
function test(call, args, count, n) {
    let r = (call.apply(n, args) === count);
    console.assert(r, `Found items count: ${count}`);
    if (!r) throw "¡Test failed!";
}
  • El código dado es un ejemplo y no es obligatorio usarlo tal cual. Se pueden hacer modificaciones.
  • Presta atención al rendimiento de tu solución. La solución debe ser compacta.
  • La solución debe ser simple, caber en un solo archivo y contener no más de 20 líneas de código.
  • El tiempo ideal para resolver la tarea es de no más de 15 minutos (la tarea se puede resolver en 5 minutos).

Tarea №2

Implementar una función checkSyntax(string) que verifique la corrección sintáctica de la secuencia de paréntesis. La tarea no se reduce a una simple verificación del balance de paréntesis. También se debe tener en cuenta su secuencia (anidación).

  • Presta atención al rendimiento de tu solución.
  • La solución debe ser compacta.
  • La solución debe ser simple, caber en un solo archivo y contener de 20 a 30 líneas de código o menos.
  • El tiempo ideal para resolver la tarea es de no más de 30 minutos (la tarea se puede resolver en 10 minutos).

Muestra la solución si es necesario verificar el siguiente conjunto de paréntesis: <,[,{,(

¿Cambiaría tu solución si solo necesitas verificar este conjunto de paréntesis: <,[,{

  • En caso de error, devuelve 1.

  • En todos los demás casos, devuelve 0.

Pruebas para el primer conjunto:

checkSyntax("---(++++)----") == 0
checkSyntax("") -> 0
checkSyntax("before ( middle []) after ") == 0
checkSyntax(") (") == 1
checkSyntax("} {") == 1
checkSyntax("<(   >)") == 1
checkSyntax("(  [  <>  ()  ]  <>  )") == 0
checkSyntax("   (      [)") == 1
// y etc...

Algoritmos

Tarea №1

  • Hay 2 sartenes para panqueques, cada una de las cuales puede contener exactamente 1 panqueque a la vez.
  • Hay 3 panqueques que necesitan ser cocinados.
  • Una cara del panqueque se cocina en 1 minuto.
  • Los panqueques deben ser cocinados por ambos lados.


Se considera una iteración el proceso de cocinar un lado de 2 panqueques en 2 sartenes. ¿Cuánto tiempo (iteraciones) se necesita para cocinar 3 panqueques con una distribución óptima?
Implemente su algoritmo en forma de código.

Puede ser código orientado a objetos, funcional o incluso procedimental. Justifica tu elección del enfoque.


Describe necesariamente el algoritmo, cómo resolvería esta tarea en el mundo físico (en qué momento y cómo cocinaría estos panqueques).

Refactorización

Tareas para trabajar con código ajeno.

Tarea  №1

Mira el código:

¿Qué se puede mejorar? ¿Cómo lo reescribirías?

function func(s, a, b) {

	if (s.match(/^$/)) {
		return -1;
	}
	
	var i = s.length -1;
	var aIndex =     -1;
	var bIndex =     -1;
	
	while ((aIndex == -1) && (bIndex == -1) && (i > 0)) {
	    if (s.substring(i, i +1) == a) {
	    	aIndex = i;
    	}
	    if (s.substring(i, i +1) == b) {
	    	bIndex = i;
    	}
	    i = i - 1;
	}
	
	if (aIndex != -1) {
	    if (bIndex == -1) {
	        return aIndex;
	    }
	    else {
	        return Math.max(aIndex, bIndex);
	    }
	}
	
	if (bIndex != -1) {
	    return bIndex;
	}
	else {
	    return -1;
	}
}

Tarea №2

function drawRating(vote) {
	if (vote >= 0 && vote <= 20) {
    	return '★☆☆☆☆';
	}
	else if (vote > 20 && vote <= 40) {
		return '★★☆☆☆';
	}
	else if (vote > 40 && vote <= 60) {
		return '★★★☆☆';
	}
	else if (vote > 60 && vote <= 80) {
		return '★★★★☆';
	}
	else if (vote > 80 && vote <= 100) {
		return '★★★★★';
	}
}

// Verificación del resultado del trabajo
console.log(drawRating(0) ); // ★☆☆☆☆
console.log(drawRating(1) ); // ★☆☆☆☆
console.log(drawRating(50)); // ★★★☆☆
console.log(drawRating(99)); // ★★★★★

¿Qué se puede mejorar? ¿Cómo reescribirías la función drawRating suponiendo que la función drawRating recibe una variable vote, que contiene un valor de 0 a 100? Nos interesa específicamente la lógica de implementación de la función, no la representación visual de las estrellas.

Tareas Prácticas

Tarea №1

Es necesario desarrollar un componente en JavaScript para ordenar tablas con datos.

 Funcionalidad

  • Ordenación por columnas: al hacer clic en el nombre de la columna, las filas de la tabla se ordenan en orden ascendente; al hacer clic nuevamente, se ordenan en orden descendente. Un elemento gráfico o un mensaje de texto indicará la dirección de la ordenación.

  • Paginación del lado del cliente: los datos deben mostrarse por páginas, con un máximo de 50 elementos por página. Se debe proporcionar una navegación para que el usuario pueda moverse entre las páginas.

  • Filtrado: el componente debe proporcionar un campo de texto en el que el usuario pueda introducir texto, y las filas de la tabla cuyos datos no contengan la subcadena introducida por el usuario se ocultarán. El filtrado se realizará al presionar el botón "Buscar".

  • Visualización de detalles: al hacer clic en una fila de la tabla, los valores de los campos se mostrarán en un bloque adicional debajo de la tabla.

  • Carga de datos desde el servidor: los datos se cargarán en la tabla desde el servidor. El método de carga desde el servidor es a tu elección.

 

Para demostrar el funcionamiento del componente, es necesario crear una página HTML sencilla. Se le ofrecerá al usuario elegir un conjunto de datos: pequeño o grande. Al seleccionar el conjunto de datos, este se cargará desde el servidor y se construirá la tabla con los datos. 

Formato de datos del servidor

El servidor devolverá un array JSON de datos. Ejemplo de datos:


[
	{
		id: 101,
		firstName: "Sue",
		lastName: "Corson",
		email: "DWhalley@in.gov",
		phone: "(612)211-6296",
		adress: {
			streetAddress: "9792 Mattis Ct",
			city: "Waukesha",
			state: "WI",
			zip: "22178"
		},
		description: "et lacus magna dolor..."
	}
}

El pequeño volumen de datos se obtiene mediante un enlace. http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&adress={addressObject}&description={lorem|32}

El grande volumen de datos se obtiene mediante un enlace. http://www.filltext.com/?rows=1000&id={number|1000}&firstName={firstName}&delay=3&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&adress={addressObject}&description={lorem|32}

Observaciones

  • Rendimiento: Debes prestar especial atención a la velocidad de funcionamiento. No se permite que la interfaz se congele durante la carga de datos, filtrado o ordenación.

  • Indicador de carga: Durante la carga de datos, se debe mostrar algún tipo de indicador.

  • Bibliotecas permitidas: jQuery, Lodash/Underscore, Backbone, o código propio. Sin embargo, tendrás que explicar tu elección y la razón de su uso. El uso de bibliotecas de terceros será un plus solo si es justificable y puedes explicar la razón de su elección. Demostrando tu conocimiento en la aplicación adecuada de soluciones existentes, tendrás la oportunidad de aumentar tu atractivo profesional para nosotros.

  • Calidad del código: Escribe el código como si fuera para un proyecto de trabajo. La calidad interna del código será evaluada incluso más meticulosamente que el cumplimiento externo de la tarea. El código debe estar organizado de manera que pueda ser reutilizado.

  • Manejo de errores: Recuerda manejar adecuadamente los errores.

  • Maquetación: La maquetación puede ser la más simple. La visualización y el diseño quedan a tu gusto. No tenemos inconveniente en que uses http://getbootstrap.com/ u otro framework de UI similar, pero solo para la representación de la interfaz (no se permite usar código JS del framework para resolver la tarea, pero sí se puede usar para efectos de presentación como animaciones y similares).

 Plus adicional

  • Uso de TypeScript o ES6+ (babel).

Esquema de representación visual de los datos

 

+------+------------+-----------------+-----------------+---------------+
| id ▲ | firstName ▼| lastName      ▼ | email          ▼| phone        ▼|
+------+------------+-----------------+-----------------+---------------+
| 101  | Sue        | Corson          | DWhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 102  | Lor        | Ipsumd          | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 103  | Ips        | Umdolo          | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+

Si se selecciona al usuario con id = 101, mostramos la siguiente información debajo de la tabla:

Seleccionado usuario: <b>Sue Corson</b>
Descripción:
<textarea>
et lacus magna dolor...
</textarea>
Dirección de residencia: <b>9792 Mattis Ct</b>
Ciudad: <b>Waukesha</b>
Provincia/Estado: <b>WI</b>
Código Postal: <b>22178</b>

Adicionalmente, infórmenos cómo probaste el resultado de tu trabajo. ¿Qué herramientas utilizaste y cómo realizaste las pruebas?

Comentarios

El resultado de la tarea deberá ser presentado en GitHub.



Sin Comentarios
Volver arriba