How do I make a To-Do List, and at 0 elements unchecked remaining to redirect to a website

Question

1.00/5 (3 votes)

See more:

I have a to-do list made in HTML, CSS and JavaScript, and I want to redirect to a website only if they are 0 elements unchecked remaining. I think that the code should contain "numRemaining". I have tried something in JQuery, but it was a total failure.

This is what I tried:

JavaScript

$(".todo-checkbox").change(function(){
    if($(".todo-checkbox:checked").length > 4){
        $("#yourButton").show();
    }
});

This is the to-do list:

<html>
    <head>
        <link rel="stylesheet" href="tomo.css">
        <title>TOMO</title>
    </head>
    <body>
        <h1>TOMO</h1>
        <center>
            <div id="todo-app">
                <label class="todo-label" for="new-todo">What do you have to do today?</label>
                <input type="text" id="new-todo" class="todo-input" placeholder="english homework">
                <ul id="todo-list" class="count-this"></ul>
                <div id="todo-stats"></div>
            </div>
            <button onclick="myPrint()">Print</button>
           
        </center>
        <script type="text/x-template" id="todo-item-template">
    <div class="todo-view">
        <input type="checkbox" class="todo-checkbox" {checked}>
        <span class="todo-content" tabindex="0">{text}</span>
    </div>

    <div class="todo-edit">
        <input type="text" class="todo-input" value="{text}">
    </div>

    <a href="#" class="todo-remove" title="Remove this task">
        <span class="todo-remove-icon"></span>
    </a>
</script>
<script type="text/x-template" id="todo-stats-template">
    <span class="todo-count">
        <span class="todo-remaining">{numRemaining}</span>
        <span class="todo-remaining-label">{remainingLabel}</span> left.
    </span>

    <a href="#" class="todo-clear">
        Clear <span class="todo-done">{numDone}</span>
        completed <span class="todo-done-label">{doneLabel}</span>
    </a>
</script>
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>

<script>
YUI().use('event-focus', 'json', 'model', 'model-list', 'view', function (Y) {
    var TodoAppView, TodoList, TodoModel, TodoView;

TodoModel = Y.TodoModel = Y.Base.create('todoModel', Y.Model, [], {
    sync: LocalStorageSync('todo'),
    toggleDone: function () {
        this.set('done', !this.get('done')).save();
    }
}, {
    ATTRS: {
        done: {value: false},
        text: {value: ''}
    }
});

TodoList = Y.TodoList = Y.Base.create('todoList', Y.ModelList, [], {
    model: TodoModel,
    sync: LocalStorageSync('todo'),
    done: function () {
        return this.filter(function (model) {
            return model.get('done');
        });
    },
    remaining: function () {
        return this.filter(function (model) {
            return !model.get('done');
        });
    }
});

TodoAppView = Y.TodoAppView = Y.Base.create('todoAppView', Y.View, [], {
    events: {
        '#new-todo': {keypress: 'createTodo'},
        '.todo-clear': {click: 'clearDone'},
        '.todo-item': {
            mouseover: 'hoverOn',
            mouseout : 'hoverOff'
        }
    },
    template: Y.one('#todo-stats-template').getHTML(),
    initializer: function () {
        var list = this.todoList = new TodoList();
        list.after('add', this.add, this);
        list.after('reset', this.reset, this);
        list.after(['add', 'reset', 'remove', 'todoModel:doneChange'],
                this.render, this);
        list.load();
    },
    render: function () {
        var todoList = this.todoList,
            stats    = this.get('container').one('#todo-stats'),
            numRemaining, numDone;
        if (todoList.isEmpty()) {
            stats.empty();
            return this;
        }
        numDone      = todoList.done().length;
        numRemaining = todoList.remaining().length;
        stats.setHTML(Y.Lang.sub(this.template, {
            numDone       : numDone,
            numRemaining  : numRemaining,
            doneLabel     : numDone === 1 ? 'task' : 'tasks',
            remainingLabel: numRemaining === 1 ? 'task' : 'tasks'
        }));
        if (!numDone) {
            stats.one('.todo-clear').remove();
        }

        return this;
    },
    add: function (e) {
        var view = new TodoView({model: e.model});

        this.get('container').one('#todo-list').append(
            view.render().get('container')
        );
    },
    clearDone: function (e) {
        var done = this.todoList.done();

        e.preventDefault();
        this.todoList.remove(done, {silent: true});
        Y.Array.each(done, function (todo) {
            todo.destroy({remove: true});
        });
        this.render();
    },
    createTodo: function (e) {
        var inputNode, value;

        if (e.keyCode === 13) { // enter key
            inputNode = this.get('inputNode');
            value     = Y.Lang.trim(inputNode.get('value'));

            if (!value) { return; }
            this.todoList.create({text: value});

            inputNode.set('value', '');
        }
    },
    hoverOff: function (e) {
        e.currentTarget.removeClass('todo-hover');
    },
    hoverOn: function (e) {
        e.currentTarget.addClass('todo-hover');
    },
    reset: function (e) {
        var fragment = Y.one(Y.config.doc.createDocumentFragment());

        Y.Array.each(e.models, function (model) {
            var view = new TodoView({model: model});
            fragment.append(view.render().get('container'));
        });

        this.get('container').one('#todo-list').setHTML(fragment);
    }
}, {
    ATTRS: {
        container: {
            valueFn: function () {
                return '#todo-app';
            }
        },
        inputNode: {
            valueFn: function () {
                return Y.one('#new-todo');
            }
        }
    }
});

TodoView = Y.TodoView = Y.Base.create('todoView', Y.View, [], {
    containerTemplate: '<li class="todo-item"/>',
    events: {
        '.todo-checkbox': {click: 'toggleDone'},
        '.todo-content': {
            click: 'edit',
            focus: 'edit'
        },
        '.todo-input'   : {
            blur    : 'save',
            keypress: 'enter'
        },
        '.todo-remove': {click: 'remove'}
    },
    template: Y.one('#todo-item-template').getHTML(),

    initializer: function () {
        var model = this.get('model');
        model.after('change', this.render, this);

        model.after('destroy', function () {
            this.destroy({remove: true});
        }, this);
    },

    render: function () {
        var container = this.get('container'),
            model     = this.get('model'),
            done      = model.get('done');

        container.setHTML(Y.Lang.sub(this.template, {
            checked: done ? 'checked' : '',
            text   : model.getAsHTML('text')
        }));

        container[done ? 'addClass' : 'removeClass']('todo-done');
        this.set('inputNode', container.one('.todo-input'));

        return this;
    },
    edit: function () {
        this.get('container').addClass('editing');
        this.get('inputNode').focus();
    },
    enter: function (e) {
        if (e.keyCode === 13) { 
            Y.one('#new-todo').focus();
        }
    },
    remove: function (e) {
        e.preventDefault();

        this.constructor.superclass.remove.call(this);
        this.get('model').destroy({'delete': true});
    },

    save: function () {
        this.get('container').removeClass('editing');
        this.get('model').set('text', this.get('inputNode').get('value')).save();
    },

    toggleDone: function () {
        this.get('model').toggleDone();
    }
});

function LocalStorageSync(key) {
    var localStorage;

    if (!key) {
        Y.error('No storage key specified.');
    }

    if (Y.config.win.localStorage) {
        localStorage = Y.config.win.localStorage;
    }

    var data = Y.JSON.parse((localStorage && localStorage.getItem(key)) || '{}');
    function destroy(id) {
        var modelHash;

        if ((modelHash = data[id])) {
            delete data[id];
            save();
        }

        return modelHash;
    }
    function generateId() {
        var id = '',
            i  = 4;

        while (i--) {
            id += (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16).substring(1);
        }

        return id;
    }
    function get(id) {
        return id ? data[id] : Y.Object.values(data);
    }
    function save() {
        localStorage && localStorage.setItem(key, Y.JSON.stringify(data));
    }

    function set(model) {
        var hash        = model.toJSON(),
            idAttribute = model.idAttribute;

        if (!Y.Lang.isValue(hash[idAttribute])) {
            hash[idAttribute] = generateId();
        }

        data[hash[idAttribute]] = hash;
        save();

        return hash;
    }
    return function (action, options, callback) {
        var isModel = Y.Model && this instanceof Y.Model;

        switch (action) {
        case 'create': // intentional fallthru
        case 'update':
            callback(null, set(this));
            return;

        case 'read':
            callback(null, get(isModel && this.get('id')));
            return;

        case 'delete':
            callback(null, destroy(isModel && this.get('id')));
            return;
        }
    };
}
new TodoAppView();

});
</script>
        <script>
function myPrint() {
    window.print();
}
</script>
    </body>
</html>

Posted 6-Jan-16 7:57am

iandavidbocioaca

Updated 7-Jan-16 4:44am

v3

Add a Solution

Comments

Patrice T 6-Jan-16 14:19pm

"total failure" is not a good explanation of your problem.
Improve your question with the source code, not a link

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

wirvine · Answer 1 · 2016-01-06T16:26:00

Hi so I think you are making this way harder than it needs to be. You can use the javascript window.location object and call it when numRemaining == 0 and numDone >= 1.

Looks like this will be done in your code assigned to the TodoAppView variable specifically in the render: function portion:

render: function () {
					var todoList = this.todoList,
						stats    = this.get('container').one('#todo-stats'),numRemaining, numDone;
					if (todoList.isEmpty()) {
						stats.empty();
						return this;
					}				
					numDone      = todoList.done().length;
					numRemaining = todoList.remaining().length;
					stats.setHTML(Y.Lang.sub(this.template, {
						numDone       : numDone,
						numRemaining  : numRemaining,
						doneLabel     : numDone === 1 ? 'task' : 'tasks',
						remainingLabel: numRemaining === 1 ? 'task' : 'tasks'
					}));
					
                    // I believe this is the code you are looking for
                    // if numRemaining = 0 and we actually have tasks we assume all are           complete and redirect.
					if(numRemaining===0 && numDone>1) {
						window.location.assign("HTML HYPERLINK HERE")
					}
					
					if (!numDone) {
						stats.one('.todo-clear').remove();
					}
				
					return this;
				}