What is the simplest way of marking my "To-do" as complete?

Question

I have a fiddle here: https://jsfiddle.net/419r62t8/1/

View.prototype.render = function (viewCmd, parameter) {
    var that = this;
    var viewCommands = {
        showEntries: function () {
            that.$todoList.innerHTML = that.template.show(parameter);
        },
        removeItem: function () {
            that._removeItem(parameter);
        },
        updateElementCount: function () {
            that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
        },
        contentBlockVisibility: function () {
            that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
        },
        setFilter: function () {
            that._setFilter(parameter);
        },
        clearNewTodo: function () {
            that.$newTodo.value = '';
        },
        editItem: function () {
            that._editItem(parameter.id, parameter.title);
        },
        editItemDone: function () {
            that._editItemDone(parameter.id, parameter.title);
        }
    };

    viewCommands[viewCmd]();
};

View.prototype._itemId = function (element) {
    var li = $parent(element, 'li');
    return parseInt(li.dataset.id, 10);
};

View.prototype._bindItemEditDone = function (handler) {
    var that = this;
    $live('#todo-list li .edit', 'blur', function () {
        if (!this.dataset.iscanceled) {
            handler({
                id: that._itemId(this),
                title: this.value
            });
        }
    });

    $live('#todo-list li .edit', 'keypress', function (event) {
        if (event.keyCode === that.ENTER_KEY) {
            // Remove the cursor from the input when you hit enter just like if it
            // were a real form
            this.blur();
        }
    });
};

View.prototype._bindItemEditCancel = function (handler) {
    var that = this;
    $live('#todo-list li .edit', 'keyup', function (event) {
        if (event.keyCode === that.ESCAPE_KEY) {
            this.dataset.iscanceled = true;
            this.blur();

            handler({id: that._itemId(this)});
        }
    });
};

View.prototype.bind = function (event, handler) {
    var that = this;
    if (event === 'newTodo') {
        $on(that.$newTodo, 'change', function () {
            handler(that.$newTodo.value);
        });

    } else if (event === 'itemEdit') {
        $live('#todo-list li label', 'dblclick', function () {
            handler({id: that._itemId(this)});
        });

    } else if (event === 'itemRemove') {
        $live('#todo-list .destroy', 'click', function () {
            handler({id: that._itemId(this)});
        });

    } else if (event === 'itemEditDone') {
        that._bindItemEditDone(handler);

    } else if (event === 'itemEditCancel') {
        that._bindItemEditCancel(handler);

    } else if (even === 'itemComplete') {
        that._bindItemComplete(handler);
    }
};

EDIT: I am thinking I can bind a new function here to add an strike-through to the "completed" items on the todo list. Completing them on single click or by adding a checkbox for completing it.

I've got the CSS but I'm lacking the JS to tie it all together.

I am attempting to create a simple strike through on-click to show when an item has been marked as completed. Any help would be much appreciated.

@epascarello That's what I am trying to do. But I don't really know where to begin. This project was just dumped in my lap without any guidance or direction. :( — Dragon Kyn, Mar 01 '18 at 18:47
Something like `if($("#checkbox").is(":checked")) { //add strike through}else{//remove strike through}` on checkbox change?!! — Fr0zenFyr, Mar 01 '18 at 19:30

score 1 · Answer 1 · answered Mar 01 '18 at 18:43

You're close with the CSS, but the best bet is to replace the checkbox with an image (svg if you can) when it is checked.

text-decoration: line-through will not help here -- this only works with text.

Often the checkbox's label will get the image and the checkbox itself will be hidden (a label can be clicked and perform the same actions as the input/checkbox itself)

Check this Answer out and see if it'll help you along your path: Pure CSS Checkbox Image replacement

score 0 · Answer 2 · answered Mar 01 '18 at 18:46

0

Try adding a jquery event listener to the id of the checkbox. Tell id to toggle the css on click and you should be good to go. Do you know how to achieve that?

answered Mar 01 '18 at 18:46

Kentaro Fujiy

24
4

If you look at the fiddle, there is no checkbox yet. Just functionality for everything BUT the "completed" mark. I'm feeling pretty lost. – Dragon Kyn Mar 01 '18 at 18:49
I know how it feels... I've updated your fiddle ( https://jsfiddle.net/kentaro/419r62t8/14/ ) take a look at the end of the css te understand how I've achieved that. (I used Kristopher Skelton's codepen as base https://codepen.io/KMSkelton/pen/OMVovK) – Kentaro Fujiy Mar 01 '18 at 19:30

What is the simplest way of marking my "To-do" as complete?

2 Answers2