JSFiddle - React, Tailwind, and code Playground

by Jakub Lemiszewski

HTML

<body>
    <!-- Heading -->
    <header class="todo-title">
        <h1>Do I have to do it?</h1>
    </header>
    <!-- Main content -->
    <main>
        <!-- Section for input fields to add a task-->
        <div id="section-add-task" class="add-task">
            <div class="input-field">
                <input type="text" class="input-task" id="task" placeholder="add a task" autocomplete="off" onfocus="this.placeholder = '' " onblur="this.placeholder = 'new task..'" />
            </div>
            <!-- Button Add Task -->
            <div class="add-task-btn left">
                <input type="submit" value="Add Task" class="btn">
            </div>
        </div>
        <!-- Edit a task -->
        <section class="edit-task">
            <div class="card-task">
                <div class="center">
                    <h5>Tasks to be completed</h5>
                    <!-- Filter input to search for a specific task -->
                    <div class="input-field">
                        <input type="text" class="filter-task input center" id="filter" placeholder="filter task" onfocus="this.placeholder = '' " onblur="this.placeholder = 'filter task'">
                    </div>
                    <!-- List of the task filtered -->
                    <ul class="task-list"></ul>
                </div>
                <div class="center">
                    <!-- Completed tasks -->
                    <h5>Completed Tasks</h5>
                    <div class="input-field">
                        <input type="text" class="filter-task input center" id="completed-task">
                    </div>
                    <!-- List of completed tasks -->
                    <ul class="completed-tasks"></ul>
                </div>
            </div>
            <!-- Clear rhe tasks -->
            <div class="clear-task-btn center">
                <input type="button" value="Clear Tasks" class="clear-tasks btn">
            </div>
        </section>
    </main>
</body>

JavaScript

/**
 * Defining vars
 */

var sectionTask = document.querySelector("#section-add-task");
var taskInput = document.querySelector("#task");
var deleteTasks = document.querySelector(".clear-tasks");
var taskList = document.querySelector(".task-list");
var filter = document.querySelector("#filter");
var completed = document.querySelector(".completed-tasks");

// Function to load all the events
function loadAllEvents() {
    // Add task
    sectionTask.addEventListener('submit', addTask);
    // Save task
    window.addEventListener('load', getCompletedTasks);
    // Save and load to DOM
    window.addEventListener('load', getTasks);
    // Remove
    taskList.addEventListener('click', removeTask);
    // Clear all
    deleteTasks.addEventListener('click', clearTasks);
    // Clear completed
    deleteTasks.addEventListener('click', clearCompletedTasks);
    // Filter tasks
    filter.addEventListener('keyup', filterTasks);
    // Add to completed list
    taskList.addEventListener('click', addToCompletedTasks);
    // Remove completed
    completed.addEventListener('click', editCompletedTasks);
}

// Add Task Function
function addTask(e) {
    e.preventDefault();
    // If no value show message
    if (taskInput.value.trim() === "") {
        alert("Are you lazy! Add a task!");
    } else {
        // Create the list li
        var item = document.createElement("li");
        // Add class to li
        item.className = "collection-item";
        // Add the value to li
        item.appendChild(document.createTextNode(taskInput.value));
        // Create the link
        var link = document.createElement("a");
        // Add class to link
        link.className = "delete-item secondary-content";
        // Add a mark
        link.innerHTML = '<div class="comp"></div>';
        // Append link to li
        item.appendChild(link);
        // Append ul to li
        taskList.appendChild(item);
        // Append li to ul
        taskList.appendChild(item);
        //...