hemnathmouli · August 2, 2020 12:08
diff --git a/app.js b/app.js
 (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;
        }
    });
 })();
diff --git a/index.html b/index.html
 <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>
	(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>