Skip to content

Instantly share code, notes, and snippets.

@hemnathmouli
Created August 2, 2020 12:08
Show Gist options
  • Save hemnathmouli/29d652f4d4c81655935e2ae8383ba124 to your computer and use it in GitHub Desktop.
Save hemnathmouli/29d652f4d4c81655935e2ae8383ba124 to your computer and use it in GitHub Desktop.
Todo app with IndexedDB
(function(){
var db;
var dbname = 'todos';
openDatabase(function() {
console.log('db connected!');
getTodo();
});
function openDatabase(callback){
var version = 1;
var request = indexedDB.open(dbname, version);
request.onupgradeneeded = function(e) {
db = e.target.result;
e.target.transaction.onerror = databaseError;
db.createObjectStore('todo', { keyPath: 'timeStamp' });
};
request.onsuccess = function(e) {
db = e.target.result;
callback();
};
request.onerror = databaseError;
}
function databaseError(e) {
console.error('IndexedDB error:', e);
}
function addTodo( text, callback ){
var transaction = db.transaction(['todo'], 'readwrite');
var store = transaction.objectStore('todo');
var request = store.put({
text: text,
timeStamp: Date.now(),
isdone: false
});
transaction.oncomplete = function(e) {
callback();
};
request.onerror = databaseError;
}
function getTodo() {
var transaction = db.transaction(['todo'], 'readonly');
var store = transaction.objectStore('todo');
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
var data = [];
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
// If there's data, add it to array
if (result) {
data.push(result.value);
result.continue();
// Reach the end of the data
} else {
var html = '';
data.forEach(function(eachdata){
html += `<li>
<input type="checkbox" id="checkbox_${eachdata.timeStamp}" value="${eachdata.timeStamp}">
<label for="checkbox_${eachdata.timeStamp}">${eachdata.text}</label>
</li>`;
});
if ( html == '' ) {
html = '<p>Done with all todo!</p>';
}
var appendField = document.querySelector('#todo');
appendField.innerHTML = html;
var checkboxes = document.querySelectorAll("#todo input");
for (const _checkbox of checkboxes) {
_checkbox.addEventListener('change', function(e) {
if ( e.target.checked === true ) {
deleteTodo(e.target.value);
}
});
}
}
};
}
function deleteTodo(index) {
var transaction = db.transaction(["todo"], "readwrite");
var objectStore = transaction.objectStore("todo");
var objectStoreRequest = objectStore.delete(parseInt(index));
objectStoreRequest.onsuccess = function(event) {
// report the success of our request
getTodo();
};
}
var todofield = document.getElementById('todo_input');
todofield.addEventListener('keydown', function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
addTodo(
todofield.value,
function(){
todofield.value = '';
getTodo();
}
);
return false;
}
});
})();
<html>
<head>
<title>Todo</title>
</head>
<body>
<!-- todo will be appended here using javascript -->
<ul id="todo"></ul>
<input type="text" id="todo_input" placeholder="Enter Todo">
</body>
<script src="app.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment