@makifgokce burdaki kodlara nasıl entegre edebilirim :(

$(function(){
  $('#notesBaslik #addNote').click(function(){
    $('#notes-main').fadeIn(200)
  });

  $('#notes-main #container1 form #close-btn').click(function(event){
    zortEngelle(event);

    $('#notes-main').fadeOut(200)
  })
});

function zortEngelle(event) {
  event = event || window.event;
  event.preventDefault();
  return (false);
}

function ekleVeKapat() {
  $('#notes-main').fadeOut(200)
}

function noteEdit() {
  $('#notes-main').fadeIn(200)
}


let addBtn = document.getElementById("add-btn");
addBtn.addEventListener("click", function(e, event) {

  zortEngelle(event);


  let addTitle = document.getElementById("note-title");
  let addTxt = document.getElementById("note-text");
  
    if (addTitle.value == "" || addTxt.value == "") {
        return alert("Please add Note Title and Details")
    }

  let notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
  let myObj = {
    title: addTitle.value,
    text: addTxt.value
  }
  notesObj.push(myObj);
  localStorage.setItem("notes", JSON.stringify(notesObj));
  addTxt.value = "";
  addTitle.value = "";
  
  ekleVeKapat();
  showNotes();
});

function showNotes() {
  let notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
  let html = "";
  notesObj.forEach(function(element, index) {
    html += `
        <div class="note">
            <h3 class="note-title"> ${element.title} </h3>
            <p class="note-text"> ${element.text}</p>
            <button id="${index}"onclick="deleteNote(this.id)" class="note-btn"><i class="fas fa-times-circle"></i></button>
            <button id="${index}"onclick="editNote(this.id)" class="note-btn edit-btn"><i class="fas fa-edit"></i></button>
        </div>
            `;
  });
  let notesElm = document.getElementById("notes");
  if (notesObj.length != 0) {
    notesElm.innerHTML = html;
  } else {
    notesElm.innerHTML = `No notes yet! You can add notes using the add note button above.`;
  }
}

function deleteNote(index) {
  let notes = localStorage.getItem("notes");
  if (notes == null) {
      notesObj = [];
  } else {
      notesObj = JSON.parse(notes);
  }

  notesObj.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(notesObj));
  showNotes(); 
}

function editNote(index) {
    let notes = localStorage.getItem("notes");
    let addTitle = document.getElementById("note-title");
    let addTxt = document.getElementById("note-text");

    if (addTitle.value !== "" || addTxt.value !== "") {
      return alert("Please clear the form before editing a note")
    } 

    if (notes == null) {
      notesObj = [];
    } else {
      notesObj = JSON.parse(notes);
    }
    //console.log(notesObj);

    notesObj.findIndex((element, index) => {
      addTitle.value = element.title;
      addTxt.value = element.text;
    })
    notesObj.splice(index, 1);
        localStorage.setItem("notes", JSON.stringify(notesObj));
        noteEdit();
        showNotes();
}

showNotes();