2018-10-25 20:29:56 +02:00
---
id: 5a8b073d06fa14fcfde687aa
title: Exercise Tracker
challengeType: 4
2019-08-05 09:17:33 -07:00
forumTopicId: 301505
2021-01-13 03:31:00 +01:00
dashedName: exercise-tracker
2018-10-25 20:29:56 +02:00
---
2020-11-27 19:02:05 +01:00
# --description--
2020-11-25 03:25:01 -06:00
2020-11-27 19:02:05 +01:00
Build a full stack JavaScript app that is functionally similar to this: < https: / / exercise-tracker . freecodecamp . rocks / > . Working on this project will involve you writing your code using one of the following methods:
- Clone [this GitHub repo ](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/ ) and complete your project locally.
2021-04-29 06:13:38 -04:00
- Use [our Replit starter project ](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker ) to complete your project.
2020-11-27 19:02:05 +01:00
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
2020-11-25 03:25:01 -06:00
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
2018-10-25 20:29:56 +02:00
2021-08-12 06:08:44 -07:00
# --instructions--
Your responses should have the following structures.
Exercise:
```js
{
2022-03-02 11:50:37 -08:00
username: "fcc_test",
2021-08-12 06:08:44 -07:00
description: "test",
duration: 60,
date: "Mon Jan 01 1990",
_id: "5fb5853f734231456ccb3b05"
}
```
User:
```js
{
username: "fcc_test",
_id: "5fb5853f734231456ccb3b05"
}
```
Log:
```js
{
username: "fcc_test",
count: 1,
2021-08-26 13:27:52 +02:00
_id: "5fb5853f734231456ccb3b05",
2021-08-12 06:08:44 -07:00
log: [{
description: "test",
duration: 60,
date: "Mon Jan 01 1990",
}]
}
```
**Hint:** For the `date` property, the `toDateString` method of the `Date` API can be used to achieve the expected output.
2020-11-27 19:02:05 +01:00
# --hints--
2018-10-25 20:29:56 +02:00
2020-11-27 19:02:05 +01:00
You should provide your own project, not the example URL.
2018-10-25 20:29:56 +02:00
2020-11-27 19:02:05 +01:00
```js
(getUserInput) => {
const url = getUserInput('url');
assert(
!/.*\/exercise-tracker\.freecodecamp\.rocks/.test(getUserInput('url'))
);
};
```
2018-10-25 20:29:56 +02:00
2021-08-26 13:27:52 +02:00
You can `POST` to `/api/users` with form data `username` to create a new user.
```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}` )
};
};
```
The returned response from `POST /api/users` with form data `username` will be an object with `username` and `_id` properties.
2020-03-26 05:39:06 -04:00
2020-11-27 19:02:05 +01:00
```js
async (getUserInput) => {
const url = getUserInput('url');
2021-04-15 13:32:00 +09:00
const res = await fetch(url + '/api/users', {
2020-11-27 19:02:05 +01:00
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}` );
}
};
```
2020-03-26 05:39:06 -04:00
2021-08-26 13:27:52 +02:00
You can make a `GET` request to `/api/users` to get a list of all users.
2020-03-26 05:39:06 -04:00
2020-11-27 19:02:05 +01:00
```js
2021-08-26 13:27:52 +02:00
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}` )
};
};
```
The `GET` request to `/api/users` returns an array.
```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}` );
};
};
```
Each element in the array returned from `GET /api/users` is an object literal containing a user's `username` and `_id` .
```js
async(getUserInput) => {
2020-11-27 19:02:05 +01:00
const url = getUserInput('url');
2021-04-15 13:32:00 +09:00
const res = await fetch(url + '/api/users');
2021-08-26 13:27:52 +02:00
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}` );
};
};
```
You can `POST` to `/api/users/:_id/exercises` with form data `description` , `duration` , and optionally `date` . If no date is supplied, the current date will be used.
```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)
});
2020-11-27 19:02:05 +01:00
if (res.ok) {
2021-08-26 13:27:52 +02:00
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}` )
};
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${res.status} ${res.statusText}` );
}
};
```
2020-03-26 05:39:06 -04:00
2021-08-26 13:27:52 +02:00
The response returned from `POST /api/users/:_id/exercises` will be the user object with the exercise fields added.
2020-11-27 19:02:05 +01:00
```js
async (getUserInput) => {
const url = getUserInput('url');
2021-04-15 13:32:00 +09:00
const res = await fetch(url + '/api/users', {
2020-11-27 19:02:05 +01:00
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'
};
2021-04-15 13:32:00 +09:00
const addRes = await fetch(url + `/api/users/${_id}/exercises` , {
2020-11-27 19:02:05 +01:00
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
2021-04-15 13:32:00 +09:00
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
2020-11-27 19:02:05 +01:00
});
if (addRes.ok) {
const actual = await addRes.json();
assert.deepEqual(actual, expected);
2021-08-26 13:27:52 +02:00
assert.isString(actual.description);
assert.isNumber(actual.duration);
assert.isString(actual.date);
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${addRes.status} ${addRes.statusText}` );
2020-03-26 05:39:06 -04:00
}
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${res.status} ${res.statusText}` );
}
};
```
2020-03-26 05:39:06 -04:00
2021-08-26 13:27:52 +02:00
You can make a `GET` request to `/api/users/:_id/logs` to retrieve a full exercise log of any user.
2020-03-26 05:39:06 -04:00
2020-11-27 19:02:05 +01:00
```js
async (getUserInput) => {
const url = getUserInput('url');
2021-04-15 13:32:00 +09:00
const res = await fetch(url + '/api/users', {
2020-11-27 19:02:05 +01:00
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()
};
2021-04-15 13:32:00 +09:00
const addRes = await fetch(url + `/api/users/${_id}/exercises` , {
2020-11-27 19:02:05 +01:00
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
2021-04-15 13:32:00 +09:00
body: `description=${expected.description}&duration=${expected.duration}`
2020-11-27 19:02:05 +01:00
});
if (addRes.ok) {
2021-04-15 13:32:00 +09:00
const logRes = await fetch(url + `/api/users/${_id}/logs` );
2021-08-26 13:27:52 +02:00
assert.isTrue(logRes.ok);
if(!logRes.ok) {
throw new Error(`${logRes.status} ${logRes.statusText}` )
};
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${addRes.status} ${addRes.statusText}` );
2020-03-26 05:39:06 -04:00
}
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${res.status} ${res.statusText}` );
}
};
```
2020-11-25 03:25:01 -06:00
2021-08-26 13:27:52 +02:00
A request to a user's log `GET /api/users/:_id/logs` returns a user object with a `count` property representing the number of exercises that belong to that user.
2020-11-25 03:25:01 -06:00
2020-11-27 19:02:05 +01:00
```js
async (getUserInput) => {
const url = getUserInput('url');
2021-04-15 13:32:00 +09:00
const res = await fetch(url + '/api/users', {
2020-11-27 19:02:05 +01:00
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()
};
2021-04-15 13:32:00 +09:00
const addRes = await fetch(url + `/api/users/${_id}/exercises` , {
2020-11-27 19:02:05 +01:00
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
2021-04-15 13:32:00 +09:00
body: `description=${expected.description}&duration=${expected.duration}`
2020-11-27 19:02:05 +01:00
});
if (addRes.ok) {
2021-04-15 13:32:00 +09:00
const logRes = await fetch(url + `/api/users/${_id}/logs` );
2020-11-27 19:02:05 +01:00
if (logRes.ok) {
const { count } = await logRes.json();
assert(count);
2020-11-25 03:25:01 -06:00
} else {
2020-11-27 19:02:05 +01:00
throw new Error(`${logRes.status} ${logRes.statusText}` );
2020-11-25 03:25:01 -06:00
}
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${addRes.status} ${addRes.statusText}` );
2020-11-25 03:25:01 -06:00
}
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${res.status} ${res.statusText}` );
}
};
```
2020-03-26 05:39:06 -04:00
2021-08-26 13:27:52 +02:00
A `GET` request to `/api/users/:id/logs` will return the user object with a `log` array of all the exercises added.
```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}` )
};
};
```
Each item in the `log` array that is returned from `GET /api/users/:id/logs` is an object that should have a `description` , `duration` , and `date` properties.
```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}` )
};
};
```
The `description` property of any object in the `log` array that is returned from `GET /api/users/:id/logs` should be a string.
```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}` );
};
};
```
The `duration` property of any object in the `log` array that is returned from `GET /api/users/:id/logs` should be a number.
```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}` );
};
};
```
The `date` property of any object in the `log` array that is returned from `GET /api/users/:id/logs` should be a string.. Use the `dateString` format of the `Date` API.
```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}` );
};
};
```
You can add `from` , `to` and `limit` parameters to a `GET /api/users/:_id/logs` request to retrieve part of the log of any user. `from` and `to` are dates in `yyyy-mm-dd` format. `limit` is an integer of how many logs to send back.
2020-03-26 05:39:06 -04:00
2020-11-27 19:02:05 +01:00
```js
async (getUserInput) => {
const url = getUserInput('url');
2021-04-15 13:32:00 +09:00
const res = await fetch(url + '/api/users', {
2020-11-27 19:02:05 +01:00
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()
};
2021-04-15 13:32:00 +09:00
const addExerciseRes = await fetch(url + `/api/users/${_id}/exercises` , {
2020-11-27 19:02:05 +01:00
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
2021-04-15 13:32:00 +09:00
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
2020-11-27 19:02:05 +01:00
});
2021-04-15 13:32:00 +09:00
const addExerciseTwoRes = await fetch(url + `/api/users/${_id}/exercises` , {
2020-11-27 19:02:05 +01:00
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
2022-02-10 21:33:36 +01:00
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-03`
2020-11-27 19:02:05 +01:00
});
if (addExerciseRes.ok & & addExerciseTwoRes.ok) {
const logRes = await fetch(
2022-02-10 21:33:36 +01:00
url + `/api/users/${_id}/logs?from=1989-12-31&to=1990-01-04`
2020-11-27 19:02:05 +01:00
);
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(
2021-04-15 13:32:00 +09:00
url + `/api/users/${_id}/logs?limit=1`
2020-11-27 19:02:05 +01:00
);
if (limitRes.ok) {
const { log } = await limitRes.json();
assert.isArray(log);
assert.equal(1, log.length);
2020-03-26 05:39:06 -04:00
} else {
2020-11-27 19:02:05 +01:00
throw new Error(`${limitRes.status} ${limitRes.statusText}` );
2020-03-26 05:39:06 -04:00
}
2022-02-10 21:33:36 +01:00
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}` );
}
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${res.status} ${res.statusText}` );
2020-03-26 05:39:06 -04:00
}
2020-11-27 19:02:05 +01:00
} else {
throw new Error(`${res.status} ${res.statusText}` );
}
};
2018-10-25 20:29:56 +02:00
```
2020-11-27 19:02:05 +01:00
# --solutions--
2018-10-25 20:29:56 +02:00
```js
2019-10-24 10:08:13 +05:30
/**
2020-03-26 05:39:06 -04:00
Backend challenges don't need solutions,
because they would need to be tested against a full working project.
2019-10-24 10:08:13 +05:30
Please check our contributing guidelines to learn more.
*/
2018-10-25 20:29:56 +02:00
```