toDo list test exercise

            
              // Create needed constants Mark Webster wrote all this code
const list = document.querySelector('ul');
const titleInput = document.querySelector('#title');
const bodyInput = document.querySelector('#body');
const form = document.querySelector('form');
const submitBtn = document.querySelector('form button');
//console.log ('script got to line 7');
//create an instance of a db object for storage
let db;
  //console.log ('script got to line 10');
window.onload = function(){
  //open database if it doesnt already exist
  /*open version 1 of notes database*/
  let request = window.indexedDB.open('notes', 1);
  //console.log ('script got to line 15');
  //error handler
  request.onerror = function() {
    console.log('Database failed to open');
  };
  //console.log ('script got to line 20');
  //onsuccess handler
  request.onsuccess = function() {
    console.log('Database opened successfully');

    //store the opened database object in the db variable
    db = request.result;
    //console.log ('script got to line 27');
    //run the displayData() to show notes already in db
    displayData();
  };//end request.onsuccess handler
// $$$$$ script can't get here console.log ('script got to line 31');
  //onupgradeneeded handler
  request.onugradeneeded = function(e) {

    //grab a reference to opened db
    let db = e.target.result;

    /*create an objectStore to store our notes in (single table)
      including an auto-incrementing key*/
    let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true});

    //define what data items objectStore will contain
    objectStore.createIndex('title', 'title', { unique: false });
    objectStore.createIndex('body', 'body', { unique: false });

    console.log('database setup complete');
  };

  //create an onsubmit handler to run the addData() function
  form.onsubmit = addData;


  function addData(e) {
    //prevent Default, don't want to the form to submit in conventional way - causing refresh
    e.preventDefault();

    //grab values from form and store them in an object
    let newItem = { title: titleInput.value, body: bodyInput.value };

    //open a read/write db transaction, ready for adding database
    let transaction = db.transaction(['notes'], 'readwrite');

    //call an object store that's already been added to db
    let objectStore = transaction.objectStore('notes');

    //make a request to add our newItem object to the object storage
    var request = objectStore.add(newItem);
    request.onsuccess = function() {
      //clear the form, ready for next entry
      titleInput.value = '';
      bodyInput.value = '';
    };//end request.onsuccess function

    //report on sucess of transaction
    transaction.oncomplete = function(){
      console.log('transaction completed: db mod finished');

      //update display of data to show newly added item
      displayData();
    };

    transaction.onerror = function(){
      console.log('transaction not opened due to error');
    };
  }//end function addData;;;;;?


  function displayData() {
    /*empty the li contents to prevent duplicates
    strips out the fistChild's until there are no more*/
    while (list.firstChild) {//list = the <ul>
      list.removeChild(list.firstChild);// remove <li>'s
    }

    //open our object store and get a cursor - which iterates
    //thru all the different data items in store
    let objectStore = db.transaction('notes').objectStore('notes');
    objectStore.openCursor().onsuccess = function(e) {
      //get a reference to the cursor....cursor????
      let cursor = e.target.result;
      //if there is still another data item to
      //iterate thru keep running this code
      if(cursor) {
        //create a <li>, h3, p
        let listItem = document.createElement('li');
        let h3 = document.createElement('h3');
        let para = document.createElement('p');

        listItem.appendChild(h3);
        listItem.appendChild(para);
        //add <li> to inside of <ul> at bottom below other <li>'s
        list.appendChild(listItem);

        //put data from the cursor inside the h3 and para
        h3.textContent = cursor.value.title;
        para.textContent = cursor.value.body;
        //store the ID of the data item inside an atribute
        //on the list item so we know which list item.
        //Will be useful later when we need to delete items
        listItem.setAttribute('data-note-id', cursor.value.id);

        //create a button andn place it in each <li>
        let deleteBtn = document.createElement('button');
        listItem.appendChild(deleteBtn);
        deleteBtn.textContent = 'Delete';

        //set event handler to
        //trigger deleteItem() function to run
        deleteBtn.onclick = deleteItem;

        //iterate to next item in the cursor
        cursor.continue();//this loops the if(true) block
      } else {//when all records are looped thru this runs
        //again, if list item is empty
        if(!list.firstChild) {
          let listItem = document.createElement('li');
          listItem.textContent = 'No notes stored.';//$$$$they don't have ; here
          list.appendChild(listItem);
        }
        //if there are no more cursor items to iterate through, say so
        console.log('Notes all displayed');
      }
    };//end objectStore open cursor function
  }//end function display data


  function deleteItem(e) {
    //retrieve name of task to delete, which is currently a string
    //convert it to Number  (IDB key type-sensitive)

    let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));

    ///open a db transaction and use above to find and delete
    let transaction = db.transaction(['notes'], 'readwrite');
    let objectStore = transaction.objectStore('notes');
    let request = objectStore.delete(noteId);

    //report that it's been deleteBtn
    transaction.oncomplete = function() {
      //delete the parent of button
      //which is the <li>
      e.target.parentNode.parentNode.removeChild(e.target.parentNode);
      console.log('Note ' + noteId + ' deleted.');

      //again, if list item is empty
      if(!list.firstChild) {
        let listItem = document.createElement('li');
        listItem.textContent = 'No notes stored.';
        list.appendChild(listItem);
      }
    };//end transaction.oncomplete function
  }//end function deleteItem

};//end window.onload