HTML5 Game - Web SQL Websql

Description

Websql
Demo

<!doctype html>
<html>
  <body>
    <section id="sidebar">
      <input type="button" id="new_button" value="New note">
      <input type="button" id="delete_all_button" value="Delete all">
      //from  w w w  .  j  a v a 2 s  . c om
      <ul id="notes">
      </ul>
    </section> 
    <section id="main">
      <form>
        <ol>
          <li>
            <input type="submit" id="save_button" value="Save">
            <input type="submit" id="delete_button" value="Delete">
          </li>
          <li>
            <label for="title">Title</label>
            <input type="text" id="title">
          </li>
          <li>
            <label for="note">Note</label>
            <textarea id="note"></textarea>
          </li>
        </ol>
      </form>
    </section>

    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>

let db = null;

let connectToDB = function(){
  db = window.openDatabase('awesome_notes', '1.0',
                                 'AwesomeNotes Database', 1024*1024*3);
};


createNotesTable = function(){
  db.transaction(function(tx){
    tx.executeSql(
      "CREATE TABLE notes (id INTEGER \
       PRIMARY KEY, title TEXT, note TEXT)", [],
      function(){ alert('Notes database created successfully!'); },
      function(tx, error){ alert(error.message); } );
  });
};

let insertNote = function(title, note){
  db.transaction(function(tx){
    tx.executeSql("INSERT INTO notes (title, note) VALUES (?, ?)", 
                   [title, note],
      function(tx, result){ 
        let id = result.insertId ;
        addToNotesList(id, title);
        newNote();
      },
      function(){ 
        alert('The note could not be saved.'); 
      }
    );
  });
};

let updateNote = function(id, title, note){
  db.transaction(function(tx){
    tx.executeSql("UPDATE notes set title = ?, note = ? where id = ?",
                [title, note, id],
      function(tx, result){ 
        alert('Record ' + id + ' updated!');
        $("#notes>li[data-id=" + id + "]").html(title);
      },
      function(){ 
        alert('The note was not updated!');
      }
    );
  });
};


let deleteNote = function(id){
 db.transaction(function(tx){
    tx.executeSql("DELETE from notes where id = ?", [id],
      function(tx, result){ 
       alert('Record ' + id + ' deleted!');
       $("#notes>li[data-id=" + id + "]").remove();
      },
      function(){ 
       alert('The note was not deleted!');
      }
    );
 });
};


// loads all records from the notes table of the database;
let fetchNotes = function(){
  db.transaction(function(tx) {
      tx.executeSql('SELECT id, title, note FROM notes', [],
        function(SQLTransaction, data){
          for (let i = 0; i < data.rows.length; ++i) {
              let row = data.rows.item(i);
              let id = row['id'];
              let title = row['title'];

              addToNotesList(id, title);
          }
        }
      );
  });
};

let clearNotes = function(){
  db.transaction(function(tx){
     tx.executeSql("DELETE from notes",
       function(tx, result){ 
         $("#notes").empty();
       },
       function(){ 
         alert('Unable to clear things out.'); 
       }
     );
  });
};

// Adds the list item to the list of notes, given an id and a title.
let addToNotesList = function(id, title){
  let notes = $("#notes");
  let item = $("<li>");
  item.attr("data-id", id);
  item.html(title);               
  notes.append(item);
};


// loads a single note from the notes table using the given id
let getNote = function(id){
  db.transaction(function(tx) {
    tx.executeSql('SELECT id, title, note FROM notes where id = ?', [id],
      function(SQLTransaction, data){
        let row = data.rows.item(0);
        let title = $("#title");
        let note = $("#note");
        title.val(row["title"]);
        title.attr("data-id", row["id"]);
        note.val(row["note"]);
        $("#delete_button").show();
      });
  });
}



// Clears out the form and removes the "delete" button
newNote = function(){
  $("#delete_button").hide();
  let title = $("#title");
  title.removeAttr("data-id");
  title.val("");
  let note = $("#note");
  note.val("");
}


  
$("#save_button").click(function(event){
  event.preventDefault();
  let title = $("#title");
  let note = $("#note");
  let id = title.attr("data-id");
  
  if(id){
    updateNote(id, title.val(), note.val());
  }else{
    insertNote(title.val(), note.val());
  }
});


$("#delete_button").click(function(event){
  event.preventDefault();
  let title = $("#title");
  deleteNote(title);
});

$("#notes").click(function(event){
  if ($(event.target).is('li')) {
    let element = $(event.target);
    getNote(element.attr("data-id"));
  }
});

$("#new_button").click(function(event){
  event.preventDefault();
  newNote();
});

$("#delete_all_button").click(function(event){
   clearNotes();
 });


connectToDB();
createNotesTable();
fetchNotes();

newNote();  



      
      </script>
  </body>
</html>