hackerrank-todo-jquery/script.js at master · ruphaa/hackerrank-todo-jquery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
class Todo {
    constructor() {
        this.items = [];
        this.remainingCount = 0;
    }

    updateCount() {
        const incompleteItems = this.items.filter(item => !item.done)
        this.remainingCount = incompleteItems.length;
    }

    loadItemsFromStorage() {
        if (localStorage['todos']) {
            const itemsFromStorage = JSON.parse(localStorage.getItem('todos'));
            this.items = itemsFromStorage;
            this.updateCount();
        }
    }

    addItem(item) {
        this.items.push(item);
        this.updateCount();
        this.saveStateToStorage();
    }

    removeItem(itemId) {
        for (var i = this.items.length - 1; i >= 0; i--) {
            if (this.items[i].id === itemId) this.items.splice(i, 1);
        }
        this.updateCount();
        this.saveStateToStorage();
    }

    markItemAsDone(itemId) {
        for (var i = this.items.length - 1; i >= 0; i--) {
            if (this.items[i].id === itemId) {
                this.items[i].done = true;
            }
        }
        this.updateCount();
        this.saveStateToStorage();
    }

    markItemAsPending(itemId) {
        for (var i = this.items.length - 1; i >= 0; i--) {
            if (this.items[i].id === itemId) {
                this.items[i].done = false;
            }
        }
        this.updateCount();
        this.saveStateToStorage();
    }

    saveStateToStorage() {
        localStorage.setItem('todos', JSON.stringify(this.items));
    }
}

const appendToTaskList = function (item) {
    $('.list-wrapper').append(
        `<div class="item-wrapper ${item.done ? 'done' : ''}">
            <div class="checkbox-wrapper">
                <input type="checkbox" class="todo-check" ${item.done ? "checked" : ""} />
            </div>
            <div class="item-desc">${item.desc}</div>
            <div class="remove-item">&times</div>
            <input type="hidden" class="todo-id" value="${item.id}"/>
        </div>`
    );
};

const updateItemsCounter = function (counter) {
    $('.status-wrapper').text(`${counter} items left`);
};

$(document).ready(function () {
    const todo = new Todo();
    todo.loadItemsFromStorage();

    for (let i = 0; i < todo.items.length; i++) {
        appendToTaskList(todo.items[i]);
    }
    updateItemsCounter(todo.remainingCount);

    $('#todo-input').keypress(function (e) {
        if (e.which == 13) {
            // const item = $('#todo-input').val();
            const desc = $('#todo-input').val();
            const id = Date.now();
            const item = { id, desc };
            todo.addItem(item);
            appendToTaskList(item);
            updateItemsCounter(todo.remainingCount);
            $('#todo-input').val('').focus();
        }
    });

    $('.list-wrapper').on('click', '.remove-item', function () {
        const todoId = $(this).siblings('.todo-id').val();
        todo.removeItem(Number(todoId));
        updateItemsCounter(todo.remainingCount);
        $(this).parents('.item-wrapper').remove();
    });


    $('.list-wrapper').on('change', '.todo-check', function () {
        if ($(this).is(':checked')) {
            const todoId = $(this).parents('.checkbox-wrapper').siblings('.todo-id').val();
            todo.markItemAsDone(Number(todoId));
            updateItemsCounter(todo.remainingCount);
            $(this).parents('.item-wrapper').addClass('done');
        } else {
            const todoId = $(this).parents('.checkbox-wrapper').siblings('.todo-id').val();
            todo.markItemAsPending(Number(todoId));
            updateItemsCounter(todo.remainingCount);
            $(this).parents('.item-wrapper').removeClass('done');
        }
    });
});