622 lines
19 KiB
Markdown
622 lines
19 KiB
Markdown
---
|
|
id: 5a8b073d06fa14fcfde687aa
|
|
title: Rastreador de ejercicios
|
|
challengeType: 4
|
|
forumTopicId: 301505
|
|
dashedName: exercise-tracker
|
|
---
|
|
|
|
# --description--
|
|
|
|
Construye una aplicación full stack de JavaScript que sea funcionalmente similar a esta: <https://exercise-tracker.freecodecamp.rocks/>. Trabajar en este proyecto implicará escribir tu código utilizando uno de los siguientes métodos:
|
|
|
|
- Clona [este repositorio de GitHub](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) y completa tu proyecto localmente.
|
|
- Usa [nuestro proyecto de inicio en Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) para completar tu proyecto.
|
|
- Utiliza un constructor de sitios de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio de GitHub.
|
|
|
|
Cuando hayas terminado, asegúrate de que un demo funcional de tu proyecto esté alojado en algún lugar público. Luego, envía la URL en el campo `Solution Link`. Opcionalmente, también envía un enlace al código fuente de tu proyecto en el campo `GitHub Link`.
|
|
|
|
# --instructions--
|
|
|
|
Tus respuestas deben tener las siguientes estructuras.
|
|
|
|
Ejercicio:
|
|
|
|
```js
|
|
{
|
|
username: "fcc_test",
|
|
description: "test",
|
|
duration: 60,
|
|
date: "Mon Jan 01 1990",
|
|
_id: "5fb5853f734231456ccb3b05"
|
|
}
|
|
```
|
|
|
|
Usuario:
|
|
|
|
```js
|
|
{
|
|
username: "fcc_test",
|
|
_id: "5fb5853f734231456ccb3b05"
|
|
}
|
|
```
|
|
|
|
Log:
|
|
|
|
```js
|
|
{
|
|
username: "fcc_test",
|
|
count: 1,
|
|
_id: "5fb5853f734231456ccb3b05",
|
|
log: [{
|
|
description: "test",
|
|
duration: 60,
|
|
date: "Mon Jan 01 1990",
|
|
}]
|
|
}
|
|
```
|
|
|
|
**Pista:** Para la propiedad `date`, el método `toDateString` de la API `Date` puede ser usado para conseguir el resultado esperado.
|
|
|
|
# --hints--
|
|
|
|
Debes proporcionar tu propio proyecto, no la URL de ejemplo.
|
|
|
|
```js
|
|
(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
assert(
|
|
!/.*\/exercise-tracker\.freecodecamp\.rocks/.test(getUserInput('url'))
|
|
);
|
|
};
|
|
```
|
|
|
|
Puedes hacer una petición `POST` a `/api/users` con los datos de formulario que tenga la propiedad `username` para crear un nuevo usuario.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
assert.isTrue(res.ok);
|
|
if(!res.ok) {
|
|
throw new Error(`${res.status} ${res.statusText}`)
|
|
};
|
|
};
|
|
```
|
|
|
|
La respuesta devuelta de `POST /api/users` con datos de formulario `username` será un objeto con propiedades `username` y `_id`.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
if (res.ok) {
|
|
const { _id, username } = await res.json();
|
|
assert.exists(_id);
|
|
assert.exists(username);
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
}
|
|
};
|
|
```
|
|
|
|
Puedes hacer una petición `GET` a `/api/users` para obtener una lista con todos los usuarios.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users');
|
|
assert.isTrue(res.ok);
|
|
if(!res.ok) {
|
|
throw new Error(`${res.status} ${res.statusText}`)
|
|
};
|
|
};
|
|
```
|
|
|
|
La petición `GET` a `/api/users` devuelve un arreglo.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users');
|
|
if(res.ok){
|
|
const users = await res.json();
|
|
assert.isArray(users);
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
};
|
|
};
|
|
```
|
|
|
|
Cada elemento en el arreglo devuelto desde `GET /api/users` es un literal de objeto que contiene el `username` y `_id`.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users');
|
|
if(res.ok){
|
|
const users = await res.json();
|
|
const user = users[0];
|
|
assert.exists(user);
|
|
assert.exists(user.username);
|
|
assert.exists(user._id);
|
|
assert.isString(user.username);
|
|
assert.isString(user._id);
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
};
|
|
};
|
|
```
|
|
|
|
Puedes hacer una petición `POST` a `/api/users/:_id/exercises` con datos de formulario `description`, `duration`, y opcionalmente `date`. Si no se proporciona ninguna fecha, se utilizará la fecha actual.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
if (res.ok) {
|
|
const { _id, username } = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: 'Mon Jan 01 1990'
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
|
|
});
|
|
assert.isTrue(addRes.ok);
|
|
if(!addRes.ok) {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`)
|
|
};
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
}
|
|
};
|
|
```
|
|
|
|
La respuesta devuelta desde `POST /api/users/:_id/exercises` será el objeto de usuario con los campos de ejercicio añadidos.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
if (res.ok) {
|
|
const { _id, username } = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: 'Mon Jan 01 1990'
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
|
|
});
|
|
if (addRes.ok) {
|
|
const actual = await addRes.json();
|
|
assert.deepEqual(actual, expected);
|
|
assert.isString(actual.description);
|
|
assert.isNumber(actual.duration);
|
|
assert.isString(actual.date);
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
}
|
|
};
|
|
```
|
|
|
|
Puedes hacer una petición `GET` a `/api/users/:_id/logs` para recuperar un log completo del ejercicio de cualquier usuario.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
if (res.ok) {
|
|
const { _id, username } = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}`
|
|
});
|
|
if (addRes.ok) {
|
|
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
|
assert.isTrue(logRes.ok);
|
|
if(!logRes.ok) {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`)
|
|
};
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
}
|
|
};
|
|
```
|
|
|
|
Una solicitud al log de un usuario `GET /api/users/:_id/logs` devuelve un objeto de usuario con una propiedad `count` representando el número de ejercicios que pertenecen a ese usuario.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
if (res.ok) {
|
|
const { _id, username } = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}`
|
|
});
|
|
if (addRes.ok) {
|
|
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
|
if (logRes.ok) {
|
|
const { count } = await logRes.json();
|
|
assert(count);
|
|
} else {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
}
|
|
};
|
|
```
|
|
|
|
Una solicitud `GET` a `/api/users/:id/logs` devolverá el objeto de usuario con un arreglo `log` de todos los ejercicios añadidos.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
})
|
|
if(res.ok){
|
|
const {_id, username} = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}`
|
|
});
|
|
if(addRes.ok){
|
|
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
|
if(logRes.ok) {
|
|
const {log} = await logRes.json();
|
|
assert.isArray(log);
|
|
assert.equal(1, log.length);
|
|
} else {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
};
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`)
|
|
};
|
|
};
|
|
```
|
|
|
|
Cada elemento en el arreglo `log` que es devuelto desde `GET /api/users/:id/logs` es un objeto que debe tener las propiedades `description`, `duration` y `date`.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + `/api/users`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
if(res.ok) {
|
|
const {_id, username} = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}`
|
|
});
|
|
if(addRes.ok) {
|
|
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
|
if(logRes.ok) {
|
|
const {log} = await logRes.json();
|
|
const exercise = log[0];
|
|
assert.exists(exercise);
|
|
assert.exists(exercise.description);
|
|
assert.exists(exercise.duration);
|
|
assert.exists(exercise.date);
|
|
} else {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
|
};
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
};
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`)
|
|
};
|
|
};
|
|
```
|
|
|
|
La propiedad `description` de cualquier objeto en el arreglo `log` que es devuelto desde `GET /api/users/:id/logs` debe ser una cadena.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `username=fcc_test_${Date.now()}`.substr(0,29)
|
|
});
|
|
if(res.ok) {
|
|
const {_id, username} = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `description=${expected.description}&duration=${expected.duration}`
|
|
});
|
|
if(addRes.ok) {
|
|
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
|
if(logRes.ok){
|
|
const {log} = await logRes.json();
|
|
const exercise = log[0];
|
|
assert.isString(exercise.description);
|
|
assert.equal(exercise.description, expected.description);
|
|
} else {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
};
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
};
|
|
};
|
|
```
|
|
|
|
La propiedad `duration` de cualquier objeto en el arreglo `log` que es devuelto desde `GET /api/users/:id/logs` debe ser un número.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `username=fcc_test_${Date.now()}`.substr(0,29)
|
|
});
|
|
if(res.ok) {
|
|
const {_id, username} = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `description=${expected.description}&duration=${expected.duration}`
|
|
});
|
|
if(addRes.ok) {
|
|
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
|
if(logRes.ok){
|
|
const {log} = await logRes.json();
|
|
const exercise = log[0];
|
|
assert.isNumber(exercise.duration);
|
|
assert.equal(exercise.duration, expected.duration);
|
|
} else {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
};
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
};
|
|
};
|
|
```
|
|
|
|
La propiedad `date` de cualquier objeto en el arrelgo `log` que es devuelto desde `GET /api/users/:id/logs` debe ser una cadena.. Utiliza el formato `dateString` de la API `Date`.
|
|
|
|
```js
|
|
async(getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `username=fcc_test_${Date.now()}`.substr(0,29)
|
|
});
|
|
if(res.ok) {
|
|
const {_id, username} = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `description=${expected.description}&duration=${expected.duration}`
|
|
});
|
|
if(addRes.ok) {
|
|
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
|
if(logRes.ok){
|
|
const {log} = await logRes.json();
|
|
const exercise = log[0];
|
|
assert.isString(exercise.date);
|
|
assert.equal(exercise.date, expected.date);
|
|
} else {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
|
};
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
};
|
|
};
|
|
```
|
|
|
|
Puedes añadir parámetros `from`, `to` y `limit` a una petición `GET /api/users/:_id/logs` para recuperar parte del log de cualquier usuario. `from` y `to` son fechas en formato `yyyy-mm-dd`. `limit` es un número entero de cuántos logs hay que devolver.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
const url = getUserInput('url');
|
|
const res = await fetch(url + '/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
|
});
|
|
if (res.ok) {
|
|
const { _id, username } = await res.json();
|
|
const expected = {
|
|
username,
|
|
description: 'test',
|
|
duration: 60,
|
|
_id,
|
|
date: new Date().toDateString()
|
|
};
|
|
const addExerciseRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
|
|
});
|
|
const addExerciseTwoRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-03`
|
|
});
|
|
if (addExerciseRes.ok && addExerciseTwoRes.ok) {
|
|
const logRes = await fetch(
|
|
url + `/api/users/${_id}/logs?from=1989-12-31&to=1990-01-04`
|
|
);
|
|
if (logRes.ok) {
|
|
const { log } = await logRes.json();
|
|
assert.isArray(log);
|
|
assert.equal(2, log.length);
|
|
} else {
|
|
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
|
}
|
|
const limitRes = await fetch(
|
|
url + `/api/users/${_id}/logs?limit=1`
|
|
);
|
|
if (limitRes.ok) {
|
|
const { log } = await limitRes.json();
|
|
assert.isArray(log);
|
|
assert.equal(1, log.length);
|
|
} else {
|
|
throw new Error(`${limitRes.status} ${limitRes.statusText}`);
|
|
}
|
|
const filterDateBeforeLimitRes = await fetch(
|
|
url + `/api/users/${_id}/logs?from=1990-01-02&to=1990-01-04&limit=1`
|
|
);
|
|
if (filterDateBeforeLimitRes.ok) {
|
|
const { log } = await filterDateBeforeLimitRes.json();
|
|
assert.isArray(log);
|
|
assert.equal(1, log.length);
|
|
} else {
|
|
throw new Error(`${filterDateBeforeLimitRes.status} ${filterDateBeforeLimitRes.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
}
|
|
} else {
|
|
throw new Error(`${res.status} ${res.statusText}`);
|
|
}
|
|
};
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```js
|
|
/**
|
|
Backend challenges don't need solutions,
|
|
because they would need to be tested against a full working project.
|
|
Please check our contributing guidelines to learn more.
|
|
*/
|
|
```
|