renderInbox: function() {
        // The same code, but using ES6 Promises.
        localforage.iterate(function (value, key, iterationNumber) {
            // Resulting key/value pair -- this callback
            // will be executed for every item in the
            // database.
            if(value.type == 'task') {
                var priority;
                if(value.priority === 'low') {
                    priority = '<i class="far fa-circle" id="inbox-circle" style="color:blue"></i>'
                } else if(value.priority === 'medium') {
                    priority = '<i class="far fa-circle" id="inbox-circle" style="color:yellow"></i>'
                } else {
                    priority = '<i class="far fa-circle" id="inbox-circle" style="color:blue"></i>'
                }
                var inboxEl = document.getElementById('inbox');
                inboxEl.insertAdjacentHTML('beforeend', `<div class="row inbox-item">
                                                            <div class="col-2 col-lg-2 d-flex align-items-center">
                                                                ${priority}
                                                            </div>
                                                            <div class="col-4 col-lg-6">${value.text}</div>
                                                            <div class="col-4 col-lg-2">${value.dueDate}</div>
                                                            <div class="col-2 col-lg-2 task-actions">
                                                                <i class="fas fa-ellipsis-h"></i>
                                                            </div>
                                                        </div>`);

            }

        }).then(function () {
            var matches = document.querySelectorAll(".fa-circle");
            console.log(matches);
            var i;
            for (i = 0; i < matches.length; i++) {
                matches[i].addEventListener('mouseover', mouseOverEffect);

            //x[0].innerHTML = '<i class="far fa-check-circle"></i>'
            }
            function mouseOverEffect() {
                //JQUERY, FIND A VANILLA JS SOLUTION?
                $("#inbox-circle").mouseover(function() {
                    console.log($(this).hasClass('fa-circle'))
                    if ($(this).hasClass('fa-circle')) {
                        $(this).removeClass( "fa-circle" ).addClass( "fa-check-circle" )

                    }
                });
            }
            return
        }).catch(function (err) {
            console.log(err);
        });
        var collection = document.getElementsByClassName("fa-circle");
        var collectionArray = Array.from(collection)

        for (var i = 0; i < collection.length; i++) {
            collection[i].addEventListener('mouseover', mouseOverEffect);

        }

    }