[EXERCISE] CREATING A SIMPLE APP TO MANAGE TASKS AND TO-DO LISTS
Below is an example of a simple to-do list app written in JavaScript and its equivalent HTML and CSS code: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial scale=1.0"> <title>To-do List</title> <link rel="stylesheet" href="index.css"> </head> <body> <h1>To-do List</h1> <input type="text" id="new-todo" placeholder="Enter new to-do item" /> <button id="add-todo">Add</button> <ul id="todo-list"></ul> <script src="index.js"></script> </body> </html> ``` ## CSS Code: ```css ul { list-style: none; padding-left: 0; } li { margin-bottom: 5px; } .completed { text-decoration: line-through; } ``` ## Jacascript Code: ```js const todoList = document.getElementById('todo-list'); const newTodoInput = document.getElementById('add-todo'); let todos = []; function renderTodos() { todos.forEach(function(todo, index) { todoList.innerHTML = ''; const li = document.createElement('li'); li.textContent = todo.text; if(todo.completed) { li.classList.add('completed'); } li.addEventListener('click', function() { toggleCompleted(index); }); todoList.appendChild(li); }); } //Add a new todo function addTodo() { const newTodoText = newTodoInput.value.trim(); if(newTodoText ==='') { return; } todos.push({ text: newTodoText, completed: false }); newTodoInput.value = ''; renderTodos(); } //Toggle the completed state of a todo function toggleCompleted(index) { todos[index].completed = !todos[index].completed; renderTodos(); } //Add event listeners addTodoButton.addEventListener('click', addTodo); newTodoInput.addEventListener('keydown', function(event) { if(event.key === 'Enter') { addTodo(); } }); // Initial render renderTodos(); ``` The result looks like this 
that's exactly what I'm looking for here, people who in some way contribute to better programming and development practices. Thank you `Mr. fschmidt` 
The first rule of programming is to break all the rules made by modern scum (members of depraved modern culture). The second rule is to make code as simple/readable as possible. I use the [Old Testament](http://www.mikraite.org/The-Old-Testament-on-Programming-tp1923.html) as my guide to programming.
<!doctype html> <html> <head> <title>To-do List</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> ul { list-style: none; padding-left: 0; } li { margin-bottom: 5px; cursor: pointer; } li[completed="yes"] { text-decoration: line-through; } </style> <script> 'use strict'; function addTodo() { try { let newTodoInput = document.querySelector('input[todo]'); let newTodoText = newTodoInput.value.trim(); newTodoInput.value = ''; if( newTodoText==='' ) return; let list = document.querySelector('ul[list]'); let html = `<li onclick="toggleCompleted(this)">${newTodoText}</li>`; list.insertAdjacentHTML( 'beforeend', html ); } catch(e) { console.log(e); } } function toggleCompleted(item) { let completed = item.getAttribute('completed') ? '' : 'yes'; item.setAttribute( 'completed', completed ); } </script> </head> <body> <h1>To-do List</h1> <form onsubmit="addTodo(); return false"> <input todo type="text" autofocus required placeholder="Enter new to-do item" /> <input type="submit" value="Add"> </form> <ul list></ul> </body> </html>