You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
El corazón de este proyecto es la manipulación de datos a través de arreglos y
objetos. La idea de este archivo es contener toda la funcionalidad
que corresponda a obtener, procesar y manipular datos.
Parte de un buen proyecto es que esté ordenado y que otras programadoras puedan
acceder a el código rápidamente. Es por esto que este orden no es casualidad y
es una convención que generalmente encontrarás en internet bajo el nombre MVC o
Modelo Vista Controlador. En este proyecto Controlador y Modelo estarán bajo
el archivo data.js.
El boilerplate incluye tests que esperan que implementes las
siguientes 3 funciones y las exportes al entorno global (window) dentro del
script src/data.js, ten en cuenta que esto es solo lo básico, si necesitas más
funciones puedes hacerlo:
1) computarUsuarios(usuarios)
Esta función es la responsable de "crear" la lista de usuarios (estudiantes)
que vamos a "pintar" en la pantalla. La idea es "recorrer" el arreglo de
usuarios (estudiantes) que se encuentra dentro de la "data".
La función debe devolver un nuevo arreglo de usuarios donde cada objeto
de usuario deberá tener una propiedad con el nombre status y dentro,
sólo los datos requeridos.
Argumentos
usuarios: Arreglo de objetos obtenido de la data en bruto.
Valor de retorno
Un arreglo de objetos donde cada uno de ellos incluye estas propiedades:
nombre: Nombre respectivo de la estudiante. correo: Correo electrónico de la estudiante. sede: Sede a la cual la estudiante pertenece. generacion: Generación a la cual la estudiante pertenece. status: Un objeto con las siguientes propiedades:
porcentajeCompletado: Número entero entre 0 y 100 que indica el porcentaje de completitud
general del usuario con respecto a todos los temas asignados.
temas: Un objeto que incluye como propiedades los temas del programa.
porcentajeCompletado: Número entero entre 0 y 100 que indica el porcentaje de completitud
general del usuario con respecto al tema respectivo.
duracionTema: Número entero que indica el tiempo necesario a invertir para completar el tema.
subtemas: Un objeto que incluye como propiedades los subtemas de ese tema en particular.
porcentajeCompletado: Número entero entre 0 y 100 que indica el porcentaje de completitud
general del usuario con respecto al subtema.
tipo: String que indica la modalidad del subtema.
duracion: Número entero que indica el tiempo necesario a invertir para completar el subtema.
La función filtrarUsuarios() se encarga de ordenar la lista de usuarios creada con computeUsersStats() en base a ordenadoPor y direccion.
Argumentos
usuarios: Arreglo de objetos creado con computarUsuarios().
ordenadoPor: String que indica el criterio de ordenado. Debe permitir ordenar
por nombre, porcentaje de completitud total, porcentaje de ejercicios
autocorregidos completados, porcentaje de quizzes completados, puntuación
promedio en quizzes completados, y porcentaje de lecturas completadas.
direccion: La dirección en la que queremos ordenar. Posibles valores: ASC y DESC (ascendiente y descendiente).
Valor de retorno
Arreglo de usuarios ordenado.
3) buscarUsuarios(usuarios, busqueda)
Argumentos
usuarios: Arreglo de objetos creado con computarUsuarios().
busqueda: String de búsqueda.
Valor de retorno
Nuevo arreglo de usuarios incluyendo solo aquellos que cumplan la condición de
filtrado, es decir, aquellos que contengan el string busqueda en el nombre
(nombre) del usuario.
main.js
Ten en cuenta también que existe otro archivo main.js que no está solo por
casualidad en la estructura del proyecto. En general es una buena idea ir
separando la funcionalidad en varios archivos, ya que a medida que un proyecto
crece, se vuelve insostenible dejar todo en un solo archivo. En este caso puedes
usar main.js para todo tu código que tenga que ver con mostrar los datos en la
pantalla, y data.js para todas las funciones que vimos que obtienen y
manipulan los datos.
Esta no es la única forma de dividir tu código, puedes usar más archivos y
carpetas, siempre y cuando la estructura sea clara para tus compañeras.
index.html
Al igual que en el proyecto anterior, también existe un archivo index.html.
Como ya sabrás, acá va la página que se mostrará al usuario de este tablero de
información. También nos sirve para indicar qué scripts se usarán y unir todo lo
que hemos hecho.
The text was updated successfully, but these errors were encountered:
Detalles de Implementación
data.js
El corazón de este proyecto es la manipulación de datos a través de arreglos y
objetos. La idea de este archivo es contener toda la funcionalidad
que corresponda a obtener, procesar y manipular datos.
Parte de un buen proyecto es que esté ordenado y que otras programadoras puedan
acceder a el código rápidamente. Es por esto que este orden no es casualidad y
es una convención que generalmente encontrarás en internet bajo el nombre MVC o
Modelo Vista Controlador. En este proyecto Controlador y Modelo estarán bajo
el archivo data.js.
El boilerplate incluye tests que esperan que implementes las
siguientes 3 funciones y las exportes al entorno global (
window
) dentro delscript
src/data.js
, ten en cuenta que esto es solo lo básico, si necesitas másfunciones puedes hacerlo:
1)
computarUsuarios(usuarios)
Esta función es la responsable de "crear" la lista de usuarios (estudiantes)
que vamos a "pintar" en la pantalla. La idea es "recorrer" el arreglo de
usuarios (
estudiantes
) que se encuentra dentro de la "data".La función debe devolver un nuevo arreglo de usuarios donde cada objeto
de usuario deberá tener una propiedad con el nombre
status
y dentro,sólo los datos requeridos.
Argumentos
usuarios
: Arreglo de objetos obtenido de la data en bruto.Valor de retorno
Un arreglo de objetos donde cada uno de ellos incluye estas propiedades:
nombre
: Nombre respectivo de la estudiante.correo
: Correo electrónico de la estudiante.sede
: Sede a la cual la estudiante pertenece.generacion
: Generación a la cual la estudiante pertenece.status
: Un objeto con las siguientes propiedades:porcentajeCompletado
: Número entero entre 0 y 100 que indica el porcentaje de completitudgeneral del usuario con respecto a todos los temas asignados.
temas
: Un objeto que incluye como propiedades los temas del programa.porcentajeCompletado
: Número entero entre 0 y 100 que indica el porcentaje de completitudgeneral del usuario con respecto al tema respectivo.
duracionTema
: Número entero que indica el tiempo necesario a invertir para completar el tema.subtemas
: Un objeto que incluye como propiedades los subtemas de ese tema en particular.porcentajeCompletado
: Número entero entre 0 y 100 que indica el porcentaje de completitudgeneral del usuario con respecto al subtema.
tipo
: String que indica la modalidad del subtema.duracion
: Número entero que indica el tiempo necesario a invertir para completar el subtema.2)
filtrarUsuarios(usuarios, ordenadoPor, direccion)
La función
filtrarUsuarios()
se encarga de ordenar la lista de usuarios creada concomputeUsersStats()
en base aordenadoPor
ydireccion
.Argumentos
usuarios
: Arreglo de objetos creado concomputarUsuarios()
.ordenadoPor
: String que indica el criterio de ordenado. Debe permitir ordenarpor nombre, porcentaje de completitud total, porcentaje de ejercicios
autocorregidos completados, porcentaje de quizzes completados, puntuación
promedio en quizzes completados, y porcentaje de lecturas completadas.
direccion
: La dirección en la que queremos ordenar. Posibles valores:ASC
yDESC
(ascendiente y descendiente).Valor de retorno
Arreglo de usuarios ordenado.
3)
buscarUsuarios(usuarios, busqueda)
Argumentos
usuarios
: Arreglo de objetos creado concomputarUsuarios()
.busqueda
: String de búsqueda.Valor de retorno
Nuevo arreglo de usuarios incluyendo solo aquellos que cumplan la condición de
filtrado, es decir, aquellos que contengan el string busqueda en el nombre
(
nombre
) del usuario.main.js
Ten en cuenta también que existe otro archivo main.js que no está solo por
casualidad en la estructura del proyecto. En general es una buena idea ir
separando la funcionalidad en varios archivos, ya que a medida que un proyecto
crece, se vuelve insostenible dejar todo en un solo archivo. En este caso puedes
usar main.js para todo tu código que tenga que ver con mostrar los datos en la
pantalla, y data.js para todas las funciones que vimos que obtienen y
manipulan los datos.
Esta no es la única forma de dividir tu código, puedes usar más archivos y
carpetas, siempre y cuando la estructura sea clara para tus compañeras.
index.html
Al igual que en el proyecto anterior, también existe un archivo
index.html
.Como ya sabrás, acá va la página que se mostrará al usuario de este tablero de
información. También nos sirve para indicar qué scripts se usarán y unir todo lo
que hemos hecho.
The text was updated successfully, but these errors were encountered: