How To Create A Simple To Do List App Using HTML, CSS, JS, and PHP – Part 11

This is the continuation of a series of tutorials about creating a to-do list web application, if you haven’t checked out the entire tutorial please start from Part 1.

In this part we are going to add code to our JavaScript file to call the server-side methods we set up last time. This will change our to-do list to work from a database instead of locally stored data, meaning it to be the same data on any computer or browser you use when accessing the page.

Firstly, we can remove the ‘INSERT’ statement we had in our construction function of the ‘MyDatabase’ class. This will stop it from adding items on every refresh, as we now have server-side methods to handle adding new items.

function __construct(){
  $this->exec("CREATE TABLE IF NOT EXISTS items (
    checked BOOLEAN NOT NULL,

We are going to change the ‘ajax’ function in our JavaScript ‘scripts.js’ file to allow us to send data to a request. We add a new parameter called ‘data’ and then pass it into the ‘send’ function. This parameter can be null, and we won’t send any data with the request. This will allow us to send the variables we need on the server-side when processing adding, deleting or updating items in the database table.

function ajax(method, uri, callback, data){
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
  };, uri, true);

We are going to create a function called ‘getItems’ that takes a callback function. We send a GET request to our API URI, using our ‘ajax’ function, parse the JSON response and then execute the callback function passing in the response items.

function getItems(callback){
  ajax('GET', '/api/items', function(response){
    var items = JSON.parse(response);

We now need a function to handle adding items to the database. This function has two parameters, the ‘text’ of the new item and a callback function. We use our ajax function to send a POST request to the same URI, passing in an object which has a ‘text’ field whose value will be the value of the ‘text’ variable passed into the function. Our server-side function may return a response if an error occurs, so, for now, we just log it into the developer console.

function addItem(text, callback){
  ajax('POST', '/api/items', function(response){
  }, {text: text})

We can create a method to handle the deletion of a single item in a similar way to the function above. Instead of using a POST method we use the DELETE a method and pass an ‘id’ instead of the ‘text’ variable.

function deleteItem(id, callback){
  ajax('DELETE', '/api/items', function(response){
  }, {id: id})

Writing the JavaScript code needed to delete all the items in the database is similar to the deleting of a single item, we use a DELETE method but we don’t send an id, so then our PHP code will delete every item in the database table.

function clearItems(callback){
  ajax('DELETE', '/api/items', function(response){

The last function we need to handle the database interaction is to change the ‘checked’ value in the database table. We use a PATCH method and send an ‘id’ and ‘checked’ value which will be a boolean value.

function setChecked(id, checked, callback){
  ajax('PATCH', '/api/items', function(response){
  }, {id: id, checked : checked})

Now we need to change the rest of JavaScript to actually use these new functions. The ‘clearList’ function will now call the ‘clearItems’ function and in its callback it’ll call the ‘render’ function.

function clearList(){

The handler function we assign the checkbox change event listener will now call the ‘setChecked’ function and pass in the id and value of the checkbox. Again we will call the render function within the callback.

function checkboxClickHandler(id, event){
  setChecked(id,, function(){

Similarly, the remove click handler function will now call the ‘deleteItem’ function and pass in the id.

function removeClickHandler(id, event){
  deleteItem(id, function(){

We also need to change the event listener for the add button to call the ‘addItem’ function. We pass in the text value from our input text box to the function.

var addBtn = document.getElementById("addBtn");
addBtn.addEventListener('click', function(){
  var input = document.getElementById("addInput")
  var text = input.value;
  addItem(text, function(){

The clear items button’s click handler also needs to be changed to call the ‘clearItems’ function.

var clearBtn = document.getElementById("clearBtn");
clearBtn.addEventListener('click', function(){
  var sure = confirm("Are you sure you want to clear all items?");

Finally, we need to update our ‘render’ function to show the actual contents of our database table. We call the ‘getItems’ function, to retrieve all the items from the database, and use very similar code from our old ‘render’ function to show all the data on the HTML page.

function render(){
    for(var i=0; i<data.length; i++){
      var item = data[i];

      var ul = document.querySelector("ul");

      var li = document.createElement("li");
      li.innerText = item.text;

      var checkbox = document.createElement("input");
      checkbox.type = 'checkbox'
      checkbox.addEventListener('change', checkboxClickHandler.bind(this,;

      checkbox.checked = item.isDone; = item.isDone ? "line-through" : "none";

      var button = document.createElement("button");
      button.innerText = "Remove";
      button.addEventListener('click', removeClickHandler.bind(this,;


This tutorial series is now complete, but it doesn’t mean your to-do list web application is completed. You could change things or add new features and functionality to make your application more unique, such as changing the CSS or adding the ability to edit existing to-do list items.

Further Reading

What Is AJAX?
REST Method Basics Explained

Remember all of the code for this tutorial series can be seen at the following link:
and a demo of the to-do list application can be seen at the following link:

Leave a Reply