prof3ssorSt3v3/app.js

## app.js
import { uid } from './uid.js';
console.log(uid());
//nothing else to import because we are using the built in methods
//https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase

const IDB = (function init() {
  let db = null;
  let objectStore = null;
  let DBOpenReq = indexedDB.open('WhiskeyDB', 6);

  DBOpenReq.addEventListener('error', (err) => {
    //Error occurred while trying to open DB
    console.warn(err);
  });
  DBOpenReq.addEventListener('success', (ev) => {
    //DB has been opened... after upgradeneeded
    db = ev.target.result;
    console.log('success', db);
  });
  DBOpenReq.addEventListener('upgradeneeded', (ev) => {
    //first time opening this DB
    //OR a new version was passed into open()
    db = ev.target.result;
    let oldVersion = ev.oldVersion;
    let newVersion = ev.newVersion || db.version;
    console.log('DB updated from version', oldVersion, 'to', newVersion);

    console.log('upgrade', db);
    if (!db.objectStoreNames.contains('whiskeyStore')) {
      objectStore = db.createObjectStore('whiskeyStore', {
        keyPath: 'id',
      });
    }
  });

  document.whiskeyForm.addEventListener('submit', (ev) => {
    ev.preventDefault();
    //one of the form buttons was clicked

    let name = document.getElementById('name').value.trim();
    let country = document.getElementById('country').value.trim();
    let age = parseInt(document.getElementById('age').value);
    let owned = document.getElementById('isOwned').checked;

    let whiskey = {
      id: uid(),
      name,
      country,
      age,
      owned,
    };

    let tx = makeTX('whiskeyStore', 'readwrite');
    tx.oncomplete = (ev) => {
      console.log(ev);
      //buildList()
    };

    let store = tx.objectStore('whiskeyStore');
    let request = store.add(whiskey);

    request.onsuccess = (ev) => {
      console.log('successfully added an object');
    };
    request.onerror = (err) => {
      console.log('error in request to add');
    };
  });

  function makeTX(storeName, mode) {
    let tx = db.transaction(storeName, mode);
    tx.onerror = (err) => {
      console.warn(err);
    };
    return tx;
  }
})();

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple IndexedDB</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <header>
      <h1>IndexedDB</h1>
      <h2>Using Vanilla JS</h2>
    </header>
    <main>
      <p>This example is using plain vanilla JS and core indexedDB methods.</p>
      <p>
        If you are familiar with document databases like MongoDB, you can think
        of an ObjectStore as a collection.
      </p>
      <p>The Core Object and Interfaces are:</p>
      <ul>
        <li>
          <code>window.indexedDB</code> The database object holds Object Stores.
        </li>
        <li>
          <code>IDBObjectStore</code> An Object Store inside a database. (A
          Collection of objects)
        </li>
        <li>
          <code>IDBRequest</code> A request object for add, put, delete, etc.
        </li>
        <li><code>IDBTransaction</code> A wrapper around requests.</li>
        <li><code>IDBIndex</code> An index added to an Object Store</li>
        <li>
          <code>IDBCursor</code> To track current position inside the results of
          a request.
        </li>
        <li><code>IDBKeyRange</code> A range of values for matching a key.</li>
      </ul>
      <form name="whiskeyForm">
        <fieldset>
          <p>
            <label for="name">Whiskey: </label>
            <input type="text" id="name" placeholder="Whiskey Name" required />
          </p>
          <p>
            <label for="country">Country of Origin: </label>
            <input type="text" id="country" value="" required />
          </p>
          <p>
            <label for="age">Years Old: </label>
            <input
              type="text"
              inputmode="numeric"
              pattern="[\d]+"
              id="age"
              required
            />
          </p>
          <p>
            <label for="isOwned">Owned: </label>
            <input type="checkbox" id="isOwned" value="yes" />
          </p>
          <p>
            <button id="btnAdd">Add Whiskey</button>
            <button id="btnUpdate">Update Whiskey</button>
            <button id="btnDelete">Delete Whiskey</button>
            <button id="btnClear">Reset Form</button>
          </p>
        </fieldset>
      </form>

      <section>
        <h3>List of Whiskeys</h3>
        <ul class="wList">
          <!-- build list here -->
        </ul>
      </section>
    </main>

    <script type="module" src="app.js"></script>
  </body>
</html>

## main.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  color: #eee;
  background-color: #333;
}
body {
  background-color: #333;
  min-height: 100vh;
}
header,
main {
  padding: 1rem 2rem;
}
h1 {
  color: orange;
  font-size: 3.6rem;
  font-weight: 700;
}
h2 {
  color: orangered;
  font-size: 2.4rem;
  font-weight: 700;
}
p {
  font-size: 1.2rem;
  font-weight: 300;
  margin: 1rem 0;
}
li {
  list-style-position: inside;
  margin-left: 2rem;
  font-size: 1.2rem;
  font-weight: 500;
}
form {
  padding: 1rem 1rem;
}
fieldset {
  padding: 1rem;
}
form p {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 1rem 0;
}
label {
  font-size: 1rem;
}
input[type='text'] {
  padding: 0.2rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  width: 30ch;
}
input[type='checkbox'] {
  font-size: 1rem;
  line-height: 1.5;
  height: 1.5rem;
  width: 1.5rem;
}
button {
  padding: 0.2rem 2rem;
  margin: 1rem 0;
  font-size: 1.2rem;
  border: none;
  color: white;
  background-color: cornflowerblue;
}
.highlighted {
  color: #333;
  background-color: gold;
}

## uid.js
export const uid = () => {
  let timmy = Date.now().toString(36).toLocaleUpperCase();
  let randy = parseInt(Math.random() * Number.MAX_SAFE_INTEGER);
  randy = randy.toString(36).slice(0, 12).padStart(12, '0').toLocaleUpperCase();
  return ''.concat(timmy, '-', randy);
};
	import { uid } from './uid.js';
	console.log(uid());
	//nothing else to import because we are using the built in methods
	//https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase

	const IDB = (function init() {
	let db = null;
	let objectStore = null;
	let DBOpenReq = indexedDB.open('WhiskeyDB', 6);

	DBOpenReq.addEventListener('error', (err) => {
	//Error occurred while trying to open DB
	console.warn(err);
	});
	DBOpenReq.addEventListener('success', (ev) => {
	//DB has been opened... after upgradeneeded
	db = ev.target.result;
	console.log('success', db);
	});
	DBOpenReq.addEventListener('upgradeneeded', (ev) => {
	//first time opening this DB
	//OR a new version was passed into open()
	db = ev.target.result;
	let oldVersion = ev.oldVersion;
	let newVersion = ev.newVersion \|\| db.version;
	console.log('DB updated from version', oldVersion, 'to', newVersion);

	console.log('upgrade', db);
	if (!db.objectStoreNames.contains('whiskeyStore')) {
	objectStore = db.createObjectStore('whiskeyStore', {
	keyPath: 'id',
	});
	}
	});

	document.whiskeyForm.addEventListener('submit', (ev) => {
	ev.preventDefault();
	//one of the form buttons was clicked

	let name = document.getElementById('name').value.trim();
	let country = document.getElementById('country').value.trim();
	let age = parseInt(document.getElementById('age').value);
	let owned = document.getElementById('isOwned').checked;

	let whiskey = {
	id: uid(),
	name,
	country,
	age,
	owned,
	};

	let tx = makeTX('whiskeyStore', 'readwrite');
	tx.oncomplete = (ev) => {
	console.log(ev);
	//buildList()
	};

	let store = tx.objectStore('whiskeyStore');
	let request = store.add(whiskey);

	request.onsuccess = (ev) => {
	console.log('successfully added an object');
	};
	request.onerror = (err) => {
	console.log('error in request to add');
	};
	});

	function makeTX(storeName, mode) {
	let tx = db.transaction(storeName, mode);
	tx.onerror = (err) => {
	console.warn(err);
	};
	return tx;
	}
	})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Simple IndexedDB</title>
	<link rel="stylesheet" href="main.css" />
	</head>
	<body>
	<header>
	<h1>IndexedDB</h1>
	<h2>Using Vanilla JS</h2>
	</header>
	<main>
	<p>This example is using plain vanilla JS and core indexedDB methods.</p>
	<p>
	If you are familiar with document databases like MongoDB, you can think
	of an ObjectStore as a collection.
	</p>
	<p>The Core Object and Interfaces are:</p>
	<ul>
	<li>
	<code>window.indexedDB</code> The database object holds Object Stores.
	</li>
	<li>
	<code>IDBObjectStore</code> An Object Store inside a database. (A
	Collection of objects)
	</li>
	<li>
	<code>IDBRequest</code> A request object for add, put, delete, etc.
	</li>
	<li><code>IDBTransaction</code> A wrapper around requests.</li>
	<li><code>IDBIndex</code> An index added to an Object Store</li>
	<li>
	<code>IDBCursor</code> To track current position inside the results of
	a request.
	</li>
	<li><code>IDBKeyRange</code> A range of values for matching a key.</li>
	</ul>
	<form name="whiskeyForm">
	<fieldset>
	<p>
	<label for="name">Whiskey: </label>
	<input type="text" id="name" placeholder="Whiskey Name" required />
	</p>
	<p>
	<label for="country">Country of Origin: </label>
	<input type="text" id="country" value="" required />
	</p>
	<p>
	<label for="age">Years Old: </label>
	<input
	type="text"
	inputmode="numeric"
	pattern="[\d]+"
	id="age"
	required
	/>
	</p>
	<p>
	<label for="isOwned">Owned: </label>
	<input type="checkbox" id="isOwned" value="yes" />
	</p>
	<p>
	<button id="btnAdd">Add Whiskey</button>
	<button id="btnUpdate">Update Whiskey</button>
	<button id="btnDelete">Delete Whiskey</button>
	<button id="btnClear">Reset Form</button>
	</p>
	</fieldset>
	</form>

	<section>
	<h3>List of Whiskeys</h3>
	<ul class="wList">
	<!-- build list here -->
	</ul>
	</section>
	</main>

	<script type="module" src="app.js"></script>
	</body>
	</html>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
	html {
	font-size: 16px;
	font-weight: 300;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
	Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.5;
	color: #eee;
	background-color: #333;
	}
	body {
	background-color: #333;
	min-height: 100vh;
	}
	header,
	main {
	padding: 1rem 2rem;
	}
	h1 {
	color: orange;
	font-size: 3.6rem;
	font-weight: 700;
	}
	h2 {
	color: orangered;
	font-size: 2.4rem;
	font-weight: 700;
	}
	p {
	font-size: 1.2rem;
	font-weight: 300;
	margin: 1rem 0;
	}
	li {
	list-style-position: inside;
	margin-left: 2rem;
	font-size: 1.2rem;
	font-weight: 500;
	}
	form {
	padding: 1rem 1rem;
	}
	fieldset {
	padding: 1rem;
	}
	form p {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 1rem 0;
	}
	label {
	font-size: 1rem;
	}
	input[type='text'] {
	padding: 0.2rem 1rem;
	font-size: 1rem;
	line-height: 1.5;
	width: 30ch;
	}
	input[type='checkbox'] {
	font-size: 1rem;
	line-height: 1.5;
	height: 1.5rem;
	width: 1.5rem;
	}
	button {
	padding: 0.2rem 2rem;
	margin: 1rem 0;
	font-size: 1.2rem;
	border: none;
	color: white;
	background-color: cornflowerblue;
	}
	.highlighted {
	color: #333;
	background-color: gold;
	}
	export const uid = () => {
	let timmy = Date.now().toString(36).toLocaleUpperCase();
	let randy = parseInt(Math.random() * Number.MAX_SAFE_INTEGER);
	randy = randy.toString(36).slice(0, 12).padStart(12, '0').toLocaleUpperCase();
	return ''.concat(timmy, '-', randy);
	};