CSE 204A - ToDo API

LIST All ToDos

On page load, your webpage will need to render all existing ToDos tied to your API key. To add the data to your HTML, make a GET AJAX request to this URL:

https://cse204.work/todos

Note: The API key must be sent as an x-api-key header. This is done using the setRequestHeader method:

xhttp.setRequestHeader("x-api-key", "abc123");

This AJAX request will return an array of objects as JSON. Each object will be a ToDo that has been previously submitted with your API key. To parse this JSON into a usable array, use JSON.parse():

let todos = JSON.parse(this.responseText);

Note: Before you have successfully submitted any ToDos, this array will be empty.

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        let todos = JSON.parse(this.responseText);
        console.log(todos);
    }
};

xhttp.open("GET", "https://cse204.work/todos", true);
xhttp.setRequestHeader("x-api-key","abc123");
xhttp.send();

POST New ToDos

When your new ToDo form is submitted, you want to trigger a JavaScript event that will make an AJAX call to submit your new ToDo to the server, and if saving it is successful, add your new ToDo to the page's HTML. Do this by making an AJAX POST request to this URL:

https://cse204.work/todos

Your POST will need the following parameters, encoded as JSON:

text

The text of the to-do item

If unsuccessful, this POST request will return a text error. If successful, it will return a single object containing the ToDo that has been saved. This object will have a text, id, and user property that you can use to add a new HTML element to your existing ToDo.

// Setting variable for form input (get from HTML form)
let data = {
    text: "Some Text"
}

// Initalize AJAX Request
let xhttp2 = new XMLHttpRequest();

// Response handler
xhttp2.onreadystatechange = function() {

    // Wait for readyState = 4 & 200 response
    if (this.readyState == 4 && this.status == 200) {

        // parse JSON response
        let todo = JSON.parse(this.responseText);

        console.log(todo);

    } else if (this.readyState == 4) {

        // this.status !== 200, error from server
        console.log(this.responseText);

    }
};

xhttp2.open("POST", "https://cse204.work/todos", true);

xhttp2.setRequestHeader("Content-type", "application/json");
xhttp2.setRequestHeader("x-api-key", "abc123");
xhttp2.send(JSON.stringify(data));

GET a ToDo

To retrieve the info for a single ToDo, send a GET request to this URL, with the ToDo's id in place of {id}.

https://cse204.work/todos/{id}

Make sure you include your API Key in the x-api-key header.

If unsuccessful, this GET request will return a text error. If successful, it will return a single JSON object containing the ToDo that you requested. This object will have text, id, completed, created, updated, and user properties.

Note: Depending on how you structure your application, you may not need to use this endpoint, since the LIST endpoint returns full ToDo objects.

// Setting variable for ToDo id
const id = "abcd-1234"

// Initalize AJAX Request
let xhttp2 = new XMLHttpRequest();

// Response handler
xhttp2.onreadystatechange = function() {

    // Wait for readyState = 4 & 200 response
    if (this.readyState == 4 && this.status == 200) {

        // parse JSON response
        let todo = JSON.parse(this.responseText);

        console.log(todo);

    } else if (this.readyState == 4) {

        // this.status !== 200, error from server
        console.log(this.responseText);

    }
};

xhttp2.open("GET", "https://cse204.work/todos/"+id, true);

xhttp2.setRequestHeader("Content-type", "application/json");
xhttp2.setRequestHeader("x-api-key", "abc123");
xhttp2.send(JSON.stringify(data));

PUT ToDo Updates

To change the properties of a ToDo, send a PUT request with the data you want to update to this URL, with the id of the ToDo you want to update in place of {id}.

https://cse204.work/todos/{id}

You will use this endpoint to change a ToDo's status to "completed" once it has been checked off. Optionally, if you want to allow for editing the text of your ToDos, you can accomplish that by including a new text value in your PUT request to this endpoint.

If unsuccessful, this PUT request will return a text error. If successful, it will return a 200 response code and an empty body response.

// You're on your own for this one!

// Make sure you include a ToDo ID in the URL, you will probably get that ID from the ID field of your ToDo element in HTML inside your click event.

// Also, make sure you make the request method "PUT" and include a JSON object with your updates, probably something like:
let data = {
    completed: true
}

DELETE a ToDo

To delete a ToDo, send a DELETE request with the data you want to update to this URL, with the id of the ToDo you want to update in place of {id}.

https://cse204.work/todos/{id}

If unsuccessful, this DELETE request will return a text error. If successful, it will return a 200 response code and an empty body response.

        // You're on your own for this one!

        // Make sure that you set the request method to "DELETE"