純粋なJSは難しいです

おい、皆さん!それで、この1つはsuuuperです、そして、それはさびでありません:(以前の関連したブログはここにあります:)

Hacktoberfest週2

アントニオ・ベネット・ 月16日・ 2分読む

#opensource #hacktoberfest #rust #osd600

プロジェクト

それで、あなたはなぜ私が純粋なJavaScriptが難しいと言うか疑問に思うかもしれません.それがそうであるので、井戸.シンタックスなどの意味でハードではないが、状態などを管理する複雑なアプリケーションを構築するとき、それは非常に迅速に迷惑になると、なぜ我々はフレームワークを持って実現する.このprojectは純粋なJavaScriptとEventListenerの良さと藤堂アプリを作成することを目指しています.

問題

issueは、ユーザーがタスクを実行するときに、完了したタスクだけをクリアする方法がないことでした.

PR

あなたがちょうどそれを見たいならば、PRはhereを見つけることができます.私が最初にしたのは、明確なタスクボタンだけでなく、新しいボタンを作成することでした.
まず、もちろんボタンを加えます.

<a href="#" class="btn btn-sm btn-outline-danger clear-comp-tasks">Clear completed tasks</a>

次に、タスクリストが2より大きいときだけボタンを表示する関数の中に配置します

if(tasks.length > 2) {
            document.querySelector('.clear-tasks').style.display = 'inline-block';
            document.querySelector('.clear-comp-tasks').style.display = 'inline-block';
            document.querySelector('.filter-wrapper').style.display = 'block';
}

次に機能性
最初にイベントリスナーをボタンに登録します.

const clearCompTasks = document.querySelector(".clear-comp-tasks");
clearCompTasks.addEventListener("click", Tasklist.deleteAllCompleted);

次に、機能

static deleteAllCompleted(){
        if(confirm('This will delete ALL completed tasks')) {
            tasks.forEach(task => {
              if(task.status === 'completed')
              document.querySelector(`[data-id="${task.date}"]`).remove();
            });
            tasks = tasks.filter(task => task.status !== 'completed');
            localStorage.setItem('tasks', JSON.stringify(tasks));
            Tasklist.filter();
        }
}

全体的思考

私は、誰でもなぜさらにJavaScriptフレームワークを愛しているかについて理解します.アプリの複雑さとして、状態管理純粋なJSの痛みになります.しかし、ものを考え出すことはまだ楽しいです.