Todo - Native

Todo list native JavaScript

by Виктор Янышев

HTML

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>TODO - Native JS</title>
    </head>

    <body>
        <div class="todo">
            <div class="todo__header">
                <h1>TODO <span>(0)</span></h1>
            </div>
            <div class="todo__body"></div>
            <div class="todo__footer">
                <div class="todo__create">
                    <input type="text" name="todo[create]" placeholder="Enter text for create new todo">
                </div>
            </div>
        </div>
    </body>

</html>

CSS

:root {
    --muted: #e2e2e2
}

body {
    margin: 0;
    padding: 0;
}

.todo {
    width: 40%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 0 15px 20px 15px;
}

.todo__body {
    padding: 15px 0;
}

.todo__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 5px 0;
}

.todo__row-title {
    flex: 1 1 0;
    padding: 0 15px;
}

.todo__create input {
    width: 100%;
}

.todo__row-remove a {}

.todo__row_complete {
    color: var(--muted);
}

.todo__row_complete>.todo__row-title {
    text-decoration: line-through;
}

JavaScript

'use strict';

let todos = [
    {id: 1, status: false, text: 'Herb'},
    {id: 2, status: false, text: 'Tea'},
    {id: 3, status: false, text: 'Potato'},
    {id: 4, status: true, text: 'Meat'},
    {id: 5, status: false, text: 'Coal'},
    {id: 6, status: true, text: 'Beer'},
    {id: 7, status: true, text: 'Water'},
];

const App = document.querySelector('.todo');

/**
 * Calc and paste qty todos
 * @param data
 * @return number
 */
function count(data) {
    let qty = null;
    let elem = App.querySelector('.todo__header span');

    if(!isNaN(data)) {
        qty = data;
    } else {
        qty = data.length;
    }

    elem.innerText = `(${qty})`;

    return qty;
}

/**
 * Find todo_ by id
 * @param id
 * @return number
 */
function findIndexById(id) {
    return todos.findIndex(item => item.id === parseInt(id));
}

/**
 * Set Row Event
 * @param e
 */
function rowEvent(e) {

    if(e.target.tagName === 'A') {
        e.preventDefault();
        return remove(this);
    }

    if(e.target.tagName === 'INPUT') {
        if(e.target.getAttribute('name') === 'todo[status]') {
            return status(this, e.target)
        }
    }

    if(e.target.className === 'todo__row-title') {
        return edit(this, e.target);
    }

}

/**
 * Set status todo_
 * @return {*}
 */
function status(row, checkbox) {
    let elemClass = 'todo__row_complete';

    if(row.classList.contains(elemClass)) {
        row.classList.remove(elemClass);
        checkbox.checked = false;
    } else {
        row.classList.add(elemClass);
        checkbox.checked = true;
    }

    todos[findIndexById(row.dataset.id)].status = checkbox.checked;

    return row;
}

/**
 * Remove todo_
 * @param row
 * @return {string}
 */
function remove(row) {
    let id = row.dataset.id;
    todos.splice(findIndexById(id), 1);
    row.remove();
    count(todos);
    return id;
}

/**
 * Add todo_
 * @param e
 * @return {number}
 */
function add(e) {
    let text = this.value;
	let id = 0;

   ...