🛠️ Todolist: The Todolist API

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

🛠️ Todolist: The Todolist API

I searched the internet, and I couldn’t find a free API that accepts CORS and lets you do POST requests.

Most APIs out there don’t accept CORS requests. You can’t send them a request through the browser. You can only send them requests through a server.

Examples of these APIs include:

1. Twitter
2. Instagram

Some APIs accept CORS without requiring any authentication. You can only send GET requests to these APIs. You can’t send POST, PUT, or DELETE requests to them (because they don’t want you to change their databases).

An example of such an API is the Open Dota API.

I want to let you experience building an interface that uses a real API. So I decided to build an API just for the Todolist.

The Todolist API lets you:

1. Get a list of tasks
2. Create a new task
3. Edit a task
4. Delete a task

You’ll learn more about the API in this lesson.

The root endpoint

The root endpoint for the API is:

https://api.learnjavascript.today

Users

You should have access to your own todolist. Other students should not be able to access your todolist. To do this, we need user accounts.

Create user

You need a user to use the Todolist API. The API returns the username and id of the user if the request is successful:

POST /users

Input:

Example:

zlFetch.post(`${rootendpoint}/users`, {
  body: {
    username: 'transporterduo',
    password: '12345678'
  }
})

Response:

{
  "username": "transporterduo",
  "id": "5cc90a78f267395a2811145e"
}

Get user

Use this to check if your username exists. If it exists, the endpoint will respond with a username and an id

GET /users/:username

Example:

zlFetch(`${rootendpoint}/users/transporterduo`)

Response:

{
  "username": "transporterduo",
  "id": "5cc90a78f267395a2811145e"
}

Delete user

Deletes the user and the tasks they’ve created. Returns the username and id of the deleted user if successful.

DELETE /users/:username

Response:

{
  "username": "transporterduo",
  "id": "5cc90a78f267395a2811145e"
}

Tasks

This is where you’ll spend most of your time on. There are endpoints for:

1. Getting tasks
2. Creating a task
3. Editing a task
4. Deleting a task

Get tasks

Gets a list of tasks the user has created. Requires authentication. If successful, responds with an array of tasks that contains the following properties:

1. id: id of the task
2. task: the task
3. done: whether the task is completed

GET /tasks

Example:

zlFetch(`${rootendpoint}/tasks`, {
  auth: {
    username: 'transporterduo',
    password: '12345678'
  }
})

Response:

[{
  "id": "5b8f7b2713b6e114ab5e5645",
  "task": "Learn JavaScript for 30 minutes",
  "done": "false"
}]

Create a task

Creates a task. Requires authentication. Responds with the created task if successful.

POST /tasks

Input:

Example:

zlFetch.post(`${rootendpoint}/tasks`, {
  auth: {
    username: 'transporterduo',
    password: '12345678'
  },
  body: {
    name: 'Learn JavaScript for 30 minutes'
  }
})

Response:

{
  "id": "5b8f7b2713b6e114ab5e5645",
  "name": "Learn JavaScript for 30 minutes",
  "done": "false"
}

Update a task

Updates the specified task. Requires authentication. Responds with the edited task if successful:

PUT /tasks/:taskid

Input:

Note: Both name and done are optional. If you are editing a task, make sure to change one of them. Otherwise, what’s the point in making this request?

Example:

zlFetch.put(`${rootendpoint}/tasks/5b8f7b2713b6e114ab5e5645`, {
  auth: {
    username: 'transporterduo',
    password: '12345678'
  },
  body: {
    done: true
  }
})

Response:

{
  "id": "5b8f7b2713b6e114ab5e5645",
  "name": "Learn JavaScript for 30 minutes",
  "done": "true"
}

Delete a task

Deletes a specified task. Requires authentication. Responds with the deleted task if successful.

DELETE /tasks/:taskid

Example:

zlFetch.delete(`${rootendpoint}/tasks/5b8f7b2713b6e114ab5e5645`, {
  auth: {
    username: 'transporterduo',
    password: '12345678'
  }
})

Response:

{
  "id": "5b8f7b2713b6e114ab5e5645",
  "name": "Learn JavaScript for 30 minutes",
  "done": "true"
}

Challenge yourself

Use this API to create the Todolist yourself.

Move on to the next lesson whenever you’re ready.