Как интегрировать ajax с crud-операциями

Question

Я набираю что-то вроде кода головоломки. Мне дали репозиторий неполного приложения todo. https://github.com/bolubee101/To-do-list-front-end-30DoC .I и требуется для его завершения, обрабатывая бэкэнд и грубые операции, необходимые для работы приложения todo. Я наполовину сделал, так как реализовал вход и регистрацию с помощью паспорта. js.

Это интерфейс, куда добавляются задачи.

    <div class="content">
      <ul id="list">
        <!--<li class="item">
                <i class="fa fa-circle-thin co" job="complete" id="0"></i>
                <p class="text">Drink Coffee</p>
                <i class="fa fa-trash-o de" job="delete" id="0"></i>
            </li>-->
      </ul>
    </div>
    <div  class="add-to-do">
      <i  class="fa fa-plus-circle"></i>
      <input type="text" id="input" placeholder="Add a to-do">
    </div>
  </div>
  <script src="js/app.js"></script>

использованный злоумышленник ajax для обработки logi c приложения todo, и я должен обрабатывать сохранение данных (todos) на маршруте / save и чтобы данные были сохранены для зарегистрированного пользователя.

const base_url = "";

const clear = document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");

const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH = "lineThrough";

// Variables
let LIST, id;

//get item from local storage
let data = Get();

if (data) {
  LIST = JSON.parse(data);
  id = LIST.length;
  loadList(LIST);
} else {
  LIST = [];
  id = 0;
}
//   load list
function loadList(array) {
  array.forEach(function (item) {
    addToDO(item.name, item.id, item.done, item.trash);
  });
}

//clear the storage
clear.addEventListener("click", function () {
  Clear();
  location.reload();
});

// Show todays date
const options = { weekday: "long", month: "short", day: "numeric" };
const today = new Date();

dateElement.innerHTML = today.toLocaleDateString("en-US", options);

function addToDO(toDo, id, done, trash) {
  if (trash) {
    return;
  }

  const DONE = done ? CHECK : UNCHECK;
  const LINE = done ? LINE_THROUGH : "";
  const item = `<li class="item">
                <i class="fa ${DONE} co" job="complete" id="${id}"></i>
                <p class="text ${LINE}" >${toDo}</p>
  <i class="fa fa-trash-o de" job="delete" id="${id}"></i>
</li>

    `;
  const position = "beforeend";
  list.insertAdjacentHTML(position, item);
}

document.addEventListener("keyup", function (even) {
  if (event.keyCode == 13) {
    const toDo = input.value;
    if (toDo) {
      addToDO(toDo, id, false, false);

      LIST.push({
        name: toDo,
        id: id,
        done: false,
        trash: false,
      });
      Save(LIST);
      id++;
    }
    input.value = "";
  }
});

//COMPLETE TO DO
function completeToDo(element) {
  element.classList.toggle(CHECK);
  element.classList.toggle(UNCHECK);
  element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);

  LIST[element.id].done = LIST[element.id].done ? false : true;
}

//REMOVE TO DO
function removeToDo(element) {
  element.parentNode.parentNode.removeChild(element.parentNode);
  LIST[element.id].trash = true;
}

list.addEventListener("click", function (event) {
  const element = event.target;
  const elementJob = element.attributes.job.value;

  if (elementJob == "complete") {
    completeToDo(element);
  } else if (elementJob == "delete") {
    removeToDo(element);
  }
  Save(LIST);
});

function Save(list) {
  let data = JSON.stringify(list);

  let request = new XMLHttpRequest();
  let url = base_url + "/save";
  request.open("POST", url, true);
  request.setRequestHeader("Content-Type", "application/json");
  request.send(data);
}

function Get() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var myObj = JSON.parse(this.response);
      return myObj;
    }
  };
  xmlhttp.open("GET", base_url + "/data", true);
  xmlhttp.send();
}

function Clear() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", base_url + "/clear", true);
  xmlhttp.send();
}

Я мало что знаю о AJAX, но инструктор сказал, что мне не нужно знать ajax, чтобы выполнить задание. Буду признателен за любые идеи и предложения. Здесь снова ссылка на github с инструкциями https://github.com/bolubee101/To-do-list-front-end-30DoC