Web SQL Database

HTML

<h1 style=" border: 16px solid transparent;
    padding: 1px;
    border-image: url(https://image.freepik.com/foto-gratis/hojas-de-otono-secas-en-un-fondo-blanco_1232-244.jpg) 20% round" align="center">

  RentalZ</h1>
<h1>Click to create properties table:</h1>
<p>
  <input type="button" id="create" value="Create Table" />
</p><br>
<h1>Click to delete properties table:</h1>
<p>
  <input type="button" id="delete" value="Delete Database" />
</p><br>


<!--We made this short code just to test it first and we will add to it when it works.-->
<h1>Fill in this form to insert details in the database:</h1>
<div class="ui-field-contain">
  <label for="txProperty_type">Properties:</label>
  <select name="select-native-1" id="txProperty_type">
        <option value="Flat">Flat</option>
        <option value="House">House</option>
        <option value="Bungalow">Bungalow</option>
    </select>
</div>

<div class="ui-field-contain">
  <label for="txBedrooms">Bedrooms:</label>
  <select name="select-native-1" id="txBedrooms">
        <option value="One_bedroom">One bedroom</option>
        <option value="Two_bedrooms">Two bedrooms</option>
        <option value="Three_bedrooms">Three bedrooms</option>
    </select>
</div>

<div class="ui-field-contain">
  <label for="txPrice">Monthly rent price:</label>
  <select name="select-native-1" id="txPrice">
        <option value="£200PCM">£200PCM</option>
        <option value="£300PCM">£300PCM</option>
        <option value="£350PCM">£350PCM</option>
    </select>
</div>

<div class="ui-field-contain">
  <label for="txFurniture">Furniture:</label>
  <select name="select-native-1" id="txFurniture">
        <option value="Furnished">Furnished</option>
        <option value="Unfurnished">Unfurnished</option>
        <option value="Part-Furnished">Part-Furnished</option>
    </select>
</div>

<label for="txNotes">Notes:</label>
<textarea id="txNotes" name="Notes" style="width: 100%; margin: 0; padding: 0; border-width:...

CSS

body{
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url(http://blog.tshirt-factory.com/wp-content/uploads/crown23-o-620x620.jpg); 
}

JavaScript

// SETUP
var createBtn = document.getElementById("create"),
  addBtn = document.getElementById("Add"),
  deleteBtn = document.getElementById("delete"),
  txProperty_type = document.getElementById("txProperty_type"),
  txBedrooms = document.getElementById("txBedrooms"),
  txPrice = document.getElementById("txPrice"),
  txFurniture = document.getElementById("txFurniture"),
  txNotes = document.getElementById("txNotes"),
  txAddedBy = document.getElementById("txAddedBy"),
  txAddedOn = document.getElementById("txAddedOn"),
  records = document.getElementById("records"),
  id = 0;

// UPDATE UI FOR NO RECORDS
function handleNoRecords() {
  records.innerHTML = "<li>No records</li>";
}

// GENERIC ON ERROR
function onError(tx, error) {
  alert("An error ocurred: " + error.message);
}

// LIST PATIENT FUNCTION
function listRecords() {
  records.innerHTML = "";

  // LIST CURRENT RECORDS
  db.transaction(function(tx) {
    var sql = "SELECT * FROM Properties";
    tx.executeSql(sql, [], function(tx, result) {
      if (result.rows.length == 0) {
        handleNoRecords();
        return;
      }

      var len = result.rows.length,
        i;
      var str = '';
      for (i = 0; i < len; i++) {
        str += "<tr>";
        str += "<td>" + result.rows.item(i).id + "</td>";
        str += "<td>" + result.rows.item(i).Type + "</td>";
        str += "<td>" + result.rows.item(i).Bedrooms + "</td>";
        str += "<td>" + result.rows.item(i).Price + "</td>";
        str += "<td>" + result.rows.item(i).Furniture + "</td>";
        str += "<td>" + result.rows.item(i).Notes + "</td>";
        str += "<td>" + result.rows.item(i).Added_By + "</td>";
        str += "<td>" + result.rows.item(i).Added_On + "</td>";
        str += "</tr>";
        document.getElementById("tblGrid").innerHTML += str;
        str = '';
        id = result.rows.item(i).id;
      }

      id++;
    }, handleNoRecords)
  });
}

// PREPARE DATABASE
var db = window.openDatabase("RentalZ", "1.0", "RentalZ...