MichaelStett/index.html

## index.html
<!doctype html>
<html lang="en">
    <head>
        <title>Todo List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

        <style>
            body > .container {
                padding-top: 60px;
            }

            ul {
                padding-left: 0;
                list-style-type: none;
            }

            button > * {
                pointer-events: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="input-group mb-3 mr-auto ml-auto" id="addTaskForm">
                <input type="text" class="form-control" placeholder="Search for todo" id="searchInput">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button">Search</button>
                </div>
            </div>

            <br>
            <h3 class="text-center">Todos</h3>
            <br>

            <ul id="todoList">

            </ul>

            <form id="addTodo">
                <div class="form-row">
                    <div class="col-md-12">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text">New</div>
                            </div>
                            <input type="text" class="form-control" id="addTodoInput" minlength="3" maxlength="250"  required>
                            <input type="date" class="form-control" id="addTodoDate" min='1899-01-01' required>
                            <span id="dateErrorMessage" style="display:none;"></span>
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button" id="addTodoButton"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
        <script src="script.js"></script>
    </body>
</html>

## script.js
const Todo = class {
    constructor(desc, date) {
        this.id = Date.now();
        this.desc = desc;
        this.date = date;
        this.completed = false;
    }
}

//#region DateTime current
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
    dd='0'+dd
}
if(mm<10){
    mm='0'+mm
}

today = yyyy+'-'+mm+'-'+dd;
var dateItem = document.getElementById("addTodoDate");

dateItem.setAttribute("min", today);
dateItem.setAttribute("value", today);
//#endregion

let todos = [];

const filterTodoList = (word) =>{
    return todos.filter(( item ) => {
        return item.desc.toLowerCase().includes(word);
    });
};

const refreshTodoList = (todos) => {
    todoList.innerHTML = '';

    for (let todo of todos)
    {
        const li = document.createElement('li');

        li.setAttribute('id', todo.id);

        li.innerHTML = `
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="checkbox" ${todo.completed ? 'checked': null}>
                    </div>
                </div>
                <input type="text" minlength="3" maxlength="250" class="form-control" value="${todo.desc}" disabled>
                <input type="date" class="form-control" contenteditable="true" disabled value="${todo.date}">
                <div class="input-group-append">
                    <button class="btn btn-danger deleteTodoButton" type="button"><i class="far fa-trash-alt"></i></button>
                </div>
            </div>
        `;

        todoList.append(li);
    }
};


const addTodo = (desc, date) => {
    console.log("Add Task...");

    let todo = new Todo(desc, date);

    todos.push(todo);
    localStorage.setItem('todos', JSON.stringify(todos));

    addTodoInput.value = addTodoInput.defaultValue;
    addTodoDate.value = addTodoDate.defaultValue;

    console.table(todos);
};

const deleteTodo = (id) => {
    // like WHERE
    todos = todos.filter((item) => item.id != id);

    addToLocalStorage(todos);
}

function addToLocalStorage(todos) {
    localStorage.setItem('todos', JSON.stringify(todos));
    refreshTodoList(todos);
}

const reference = localStorage.getItem('todos');

if (reference) {
    todos = JSON.parse(reference);
    refreshTodoList(todos);
}

let isEditingAlready = false;
let editedElementId = null;

window.addEventListener('click', (event) => {
    if (event.target.type == "text" && (event.target.id !== 'addTodoInput' && event.target.id !== 'searchInput')) {
        if (!isEditingAlready)
        {
            console.log("Started editing...");
            event.target.disabled = false;

            let id = event.target.parentElement.parentElement.getAttribute('id');
            editedElementId = id;

            isEditingAlready = true;
        }
    } else {
        if (isEditingAlready)
        {

            let li = document.getElementById(editedElementId);

            if (li != null)
            {
                console.log("Stop editing...");

                let input = li.getElementsByTagName('input')[1];

                todos.find(x => x.id == editedElementId).desc = input.value;

                addToLocalStorage(todos);
                refreshTodoList(todos);

                isEditingAlready = false;
                editedElementId = null;

                searchInput.value = searchInput.defaultValue;
            }
        }
    }

});

todoList.addEventListener('click', (event) => {
    event.preventDefault();

    if (event.target.classList.contains('deleteTodoButton') ||
    event.target.classList.contains('fa-trash-alt')) {
        let li = event.target.parentElement.parentElement.parentElement;
        deleteTodo(li.getAttribute('id'));

        searchInput.value = searchInput.defaultValue;

        refreshTodoList(todos);
    }
});

addTodoButton.addEventListener('click', (event) => {
    event.preventDefault();
    addTodo(addTodoInput.value, addTodoDate.value);

    searchInput.value = searchInput.defaultValue;

    refreshTodoList(todos);
});

searchInput.addEventListener('input', (event) => {
    event.preventDefault();
    console.log(event.target.value)
    console.log(event.target.value.length)
    console.log("----")

    if (event.target.value.length >= 3){
        arr = filterTodoList(event.target.value)
        console.table(arr);
        refreshTodoList(arr);
    } else {
        refreshTodoList(todos);
    }

});
	<!doctype html>
	<html lang="en">
	<head>
	<title>Todo List</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

	<style>
	body > .container {
	padding-top: 60px;
	}

	ul {
	padding-left: 0;
	list-style-type: none;
	}

	button > * {
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="input-group mb-3 mr-auto ml-auto" id="addTaskForm">
	<input type="text" class="form-control" placeholder="Search for todo" id="searchInput">
	<div class="input-group-append">
	<button class="btn btn-primary" type="button">Search</button>
	</div>
	</div>

	<br>
	<h3 class="text-center">Todos</h3>
	<br>

	<ul id="todoList">

	</ul>

	<form id="addTodo">
	<div class="form-row">
	<div class="col-md-12">
	<div class="input-group mb-3">
	<div class="input-group-prepend">
	<div class="input-group-text">New</div>
	</div>
	<input type="text" class="form-control" id="addTodoInput" minlength="3" maxlength="250" required>
	<input type="date" class="form-control" id="addTodoDate" min='1899-01-01' required>
	<span id="dateErrorMessage" style="display:none;"></span>
	<div class="input-group-append">
	<button class="btn btn-primary" type="button" id="addTodoButton"><i class="fas fa-plus"></i></button>
	</div>
	</div>
	</div>
	</div>
	</form>

	</div>
	<script src="script.js"></script>
	</body>
	</html>
	const Todo = class {
	constructor(desc, date) {
	this.id = Date.now();
	this.desc = desc;
	this.date = date;
	this.completed = false;
	}
	}

	//#region DateTime current
	var today = new Date();
	var dd = today.getDate();
	var mm = today.getMonth()+1; //January is 0!
	var yyyy = today.getFullYear();
	if(dd<10){
	dd='0'+dd
	}
	if(mm<10){
	mm='0'+mm
	}

	today = yyyy+'-'+mm+'-'+dd;
	var dateItem = document.getElementById("addTodoDate");

	dateItem.setAttribute("min", today);
	dateItem.setAttribute("value", today);
	//#endregion

	let todos = [];

	const filterTodoList = (word) =>{
	return todos.filter(( item ) => {
	return item.desc.toLowerCase().includes(word);
	});
	};

	const refreshTodoList = (todos) => {
	todoList.innerHTML = '';

	for (let todo of todos)
	{
	const li = document.createElement('li');

	li.setAttribute('id', todo.id);

	li.innerHTML = `
	<div class="input-group mb-3">
	<div class="input-group-prepend">
	<div class="input-group-text">
	<input type="checkbox" ${todo.completed ? 'checked': null}>
	</div>
	</div>
	<input type="text" minlength="3" maxlength="250" class="form-control" value="${todo.desc}" disabled>
	<input type="date" class="form-control" contenteditable="true" disabled value="${todo.date}">
	<div class="input-group-append">
	<button class="btn btn-danger deleteTodoButton" type="button"><i class="far fa-trash-alt"></i></button>
	</div>
	</div>
	`;

	todoList.append(li);
	}
	};


	const addTodo = (desc, date) => {
	console.log("Add Task...");

	let todo = new Todo(desc, date);

	todos.push(todo);
	localStorage.setItem('todos', JSON.stringify(todos));

	addTodoInput.value = addTodoInput.defaultValue;
	addTodoDate.value = addTodoDate.defaultValue;

	console.table(todos);
	};

	const deleteTodo = (id) => {
	// like WHERE
	todos = todos.filter((item) => item.id != id);

	addToLocalStorage(todos);
	}

	function addToLocalStorage(todos) {
	localStorage.setItem('todos', JSON.stringify(todos));
	refreshTodoList(todos);
	}

	const reference = localStorage.getItem('todos');

	if (reference) {
	todos = JSON.parse(reference);
	refreshTodoList(todos);
	}

	let isEditingAlready = false;
	let editedElementId = null;

	window.addEventListener('click', (event) => {
	if (event.target.type == "text" && (event.target.id !== 'addTodoInput' && event.target.id !== 'searchInput')) {
	if (!isEditingAlready)
	{
	console.log("Started editing...");
	event.target.disabled = false;

	let id = event.target.parentElement.parentElement.getAttribute('id');
	editedElementId = id;

	isEditingAlready = true;
	}
	} else {
	if (isEditingAlready)
	{

	let li = document.getElementById(editedElementId);

	if (li != null)
	{
	console.log("Stop editing...");

	let input = li.getElementsByTagName('input')[1];

	todos.find(x => x.id == editedElementId).desc = input.value;

	addToLocalStorage(todos);
	refreshTodoList(todos);

	isEditingAlready = false;
	editedElementId = null;

	searchInput.value = searchInput.defaultValue;
	}
	}
	}

	});

	todoList.addEventListener('click', (event) => {
	event.preventDefault();

	if (event.target.classList.contains('deleteTodoButton') \|\|
	event.target.classList.contains('fa-trash-alt')) {
	let li = event.target.parentElement.parentElement.parentElement;
	deleteTodo(li.getAttribute('id'));

	searchInput.value = searchInput.defaultValue;

	refreshTodoList(todos);
	}
	});

	addTodoButton.addEventListener('click', (event) => {
	event.preventDefault();
	addTodo(addTodoInput.value, addTodoDate.value);

	searchInput.value = searchInput.defaultValue;

	refreshTodoList(todos);
	});

	searchInput.addEventListener('input', (event) => {
	event.preventDefault();
	console.log(event.target.value)
	console.log(event.target.value.length)
	console.log("----")

	if (event.target.value.length >= 3){
	arr = filterTodoList(event.target.value)
	console.table(arr);
	refreshTodoList(arr);
	} else {
	refreshTodoList(todos);
	}

	});