im building a to-do list but cant figure out how to keep my array values that have line-through decoration.
the moment render method is called, the array is built from the start. means that if i delete an li, all other li that have been marked by the checkbox with a line-through, losing the decoration.
what can i do to keep the line-through ?
i tried so far in the markTask method to replace the original value with the value that have line-through on it but it didn't work.
basically what im trying to accomplish is by inserting the value with line-through, to be able to check if this value have the line-through style and after the render to be able to keep the checked checkboxes as checked.
my code so far:
class Todo {
constructor() {
this.input = document.getElementById("input");
this.ul = document.getElementById("ul");
this.form = document.getElementById("form");
this.tasks = [];
this.registerEvent();
}
registerEvent() {
this.form.addEventListener("submit", (event) => {
event.preventDefault();
this.createTask(this.input.value);
this.form.reset();
});
}
createTask(task) {
if (task.trim().length === 0) {
return;
}
this.tasks.push(task);
this.render();
}
deleteTask(task) {
const myTask = task.target;
const parent = myTask.parentNode;
const taskToRemove = parent.childNodes[1].textContent;
const index = this.tasks.indexOf(taskToRemove);
this.tasks.splice(index, 1);
this.render();
}
markTask(task) {
const myTask = task.target;
const parent = myTask.parentNode;
if (myTask.checked) {
parent.style.textDecoration = "line-through";
} else {
parent.style.textDecoration = "none";
}
}
render() {
this.ul.innerHTML = "";
this.tasks.forEach((task) => {
const li = document.createElement("li");
const cb = document.createElement("input");
cb.type = "checkbox";
cb.addEventListener("click", (e) => {
this.markTask(e);
});
li.appendChild(cb);
li.append(document.createTextNode(task));
const btn = document.createElement("button");
li.appendChild(btn);
btn.textContent = "Delete";
btn.classList.add("remove");
btn.addEventListener("click", (e) => {
this.deleteTask(e);
});
this.ul.appendChild(li);
});
}
}
new Todo();
<form id="form">
<input id="input" />
<button id="add">Add</button>
</form>
<ul id="ul">
</ul>
it's because you're not tracking which tasks are done and you're just pushing strings. for your createTask method you need to push an object with a done property to indicate which tasks have been done like so
createTask(task) {
if (task.trim().length === 0) {
return;
}
this.tasks.push({title: task, done: false});
this.render();
}
update your render to account for tasks already done
render() {
this.ul.innerHTML = "";
this.tasks.forEach((task) => {
const li = document.createElement("li");
const cb = document.createElement("input");
cb.type = "checkbox";
cb.addEventListener("click", (e) => {
this.markTask(e);
});
li.appendChild(cb);
li.append(document.createTextNode(task.title));
const btn = document.createElement("button");
li.appendChild(btn);
btn.textContent = "Delete";
btn.classList.add("remove");
btn.addEventListener("click", (e) => {
this.deleteTask(e);
});
this.ul.appendChild(li);
if (task.done) {
cb.checked = true;
li.style.textDecoration = "line-through";
} else {
cb.checked = false;
li.style.textDecoration = "none";
}
});
}
in your constructor update your tasks variable to see this in effect
constructor() {
this.input = document.getElementById("input");
this.ul = document.getElementById("ul");
this.form = document.getElementById("form");
this.tasks = [{title: 'mill', done: true}, {title: 'jus', done: false}];
this.registerEvent();
}
hope you get the general idea. I won't do the entire implementation on markTask as this should be enough to give you a view of what the solution should be. good luck.
If I may, I have revised your code a bit.
The technique you need is event delegation:
any click on a child element is also a click on its parent elements. we plas the event listener on the parent and we see on which child element it occurred.
In your case, this only makes one event listerner for all your 'remove' buttons.
the other idea is not to ignore the DOM, it also keeps the list of tasks, you don't need to keep them in a table in memory, this is redundant.
here is the code: css is also helfull
class Todo
{
constructor()
{
this.form = document.getElementById('todo-form')
this.liste = document.getElementById('todo-list')
this.form.onsubmit = e => this.addTask(e)
this.liste.onclick = e => this.delTask(e)
}
addTask(e)
{
e.preventDefault()
if (this.form.task.value.trim() === '') return
let li = document.createElement('li')
, cb = document.createElement('input')
, sp = document.createElement('span')
, bt = document.createElement('button')
;
cb.type = 'checkbox'
sp.textContent = this.form.task.value
bt.textContent = 'Delete'
bt.className = 'remove'
li.appendChild(cb)
li.appendChild(sp)
li.appendChild(bt)
this.liste.appendChild(li)
this.form.reset()
}
delTask(e)
{
if (!e.target.matches('button.remove')) return // reject others clicks
e.target.closest('li').remove()
}
}
new Todo();
#todo-list li > span {
display : inline-block;
background-color : whitesmoke;
width : 20em;
}
#todo-list li input[type=checkbox]:checked + span {
text-decoration : line-through;
}
#todo-list li button.remove {
font-size: .6em;
}
<form id="todo-form">
<input name="task">
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>
As you can see this code is shorter. You can also use a IIFE unstead of a class, like that :
(function() // IIFE
{
let form = document.getElementById('todo-form')
, liste = document.getElementById('todo-list')
;
form.onsubmit = e => // addTask
{
e.preventDefault()
if (form.task.value.trim() === '') return
let li = document.createElement('li')
, cb = document.createElement('input')
, sp = document.createElement('span')
, bt = document.createElement('button')
;
cb.type = 'checkbox'
sp.textContent = form.task.value
bt.textContent = 'Delete'
bt.className = 'remove'
li.appendChild(cb)
li.appendChild(sp)
li.appendChild(bt)
liste.appendChild(li)
form.reset()
}
liste.onclick = e => // delTask
{
if (!e.target.matches('button.remove')) return // reject others clicks
e.target.closest('li').remove()
}
}
)()
btTaskList.onclick = e =>
{
let tasks = [...document.querySelectorAll('#todo-list li')].map(li=>
{
let val = li.querySelector('span').textContent
, chk = li.querySelector('input[type=checkbox]').checked
;
return {val,chk}
})
console.clear()
console.log( tasks )
}
#todo-list li > span {
display : inline-block;
background-color : whitesmoke;
width : 20em;
}
#todo-list li input[type=checkbox]:checked + span {
text-decoration : line-through;
}
#todo-list li button.remove {
font-size: .6em;
}
<form id="todo-form">
<input name="task">
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>
<button id="btTaskList">get task list</button>
I also added a get task list button...
After marking an element you are changing only the stayle and atrribute of element. But after delete you recreate with render whole list and in render you are not rendereing checked parameter.
Your render should be:
render() {
this.ul.innerHTML = "";
this.tasks.forEach((task) => {
const li = document.createElement("li");
const cb = document.createElement("input");
cb.type = "checkbox";
cb.addEventListener("click", (e) => {
this.markTask(e);
});
li.appendChild(cb);
// missed rendering checked
if (task.checked) {
li.style.textDecoration = "line-through";
cb.checked = 'checked';
}
li.append(document.createTextNode(task));
const btn = document.createElement("button");
li.appendChild(btn);
btn.textContent = "Delete";
btn.classList.add("remove");
btn.addEventListener("click", (e) => {
this.deleteTask(e);
});
this.ul.appendChild(li);
});
}
Related
I am currently trying to delete li by clicking deleteButton.
This is my full JS code.
const form = document.querySelector('#form');
const savedList = document.getElementById('savedList');
const doneList = document.getElementById('doneList');
form.addEventListener('submit', (e) => {
const li = document.createElement('li');
li.innerText = document.getElementById('input').value;
li.id = li.innerText;
li.isDone = false;
li.isDone ? doneList.append(li) : savedList.append(li);
const deleteButton = document.createElement('button');
deleteButton.innerText = 'x';
deleteButton.id = 'deleteButton';
li.append(deleteButton);
li.addEventListener('click', () => {
li.isDone ? (li.isDone = false) : (li.isDone = true);
li.isDone ? doneList.append(li) : savedList.append(li);
});
deleteButton.addEventListener('click', function(event) {
const targetToDo = event.currentTarget.parentNode;
console.log(targetToDo.parentNode);
targetToDo.parentNode.remove(targetToDo);
targetToDo.remove();
});
e.preventDefault();
});
<form id="form">
<input id="input" type="text" />
<button type="submit">Submit</button>
</form>
<ul id="savedList"></ul>
<ul id="doneList"></ul>
However, other lis except targetToDo are being deleted. I've tried debugging with console.log but targetToDo and its parentNode is okay. I can see li for a targetToDo and ul for its parentNode. How can I fix this? Thanks in advance.
Try this...
deleteButton.addEventListener('click', function(event) {
const targetToDo = event.currentTarget.parentNode;
console.log(targetToDo.parentNode);
setTimeout(() => li.remove(), 0); // The li that will be removed also has the delete button as child and we are inside the event handler of that child. A setTimeout() works here
});
Illustration
Hopefully, following rudimentary setup along with the code in OP for illustration is closer to the needs of the OP.
const form = document.querySelector('#form');
const savedList = document.querySelector("#saved-list");
const doneList = document.querySelector("#done-list");
form.addEventListener('submit', (e) => {
const li = document.createElement('li');
li.innerText = document.getElementById('input').value;
li.id = li.innerText;
li.isDone = false;
li.isDone ? doneList.append(li) : savedList.append(li); //<--- This condition check is insignificant as we are setting it to false in the previous statement
const deleteButton = document.createElement('button');
deleteButton.innerText = 'x';
deleteButton.id = 'deleteButton';
li.append(deleteButton);
li.addEventListener('click', () => {
li.isDone ? (li.isDone = false) : (li.isDone = true);
li.isDone ? doneList.append(li) : savedList.append(li);
});
deleteButton.addEventListener('click', function(event) {
const targetToDo = event.currentTarget.parentNode;
console.log(targetToDo.parentNode);
// targetToDo.parentNode.remove(targetToDo);
// targetToDo.parentNode.remove();
// targetToDo.remove();
setTimeout(() => li.remove(), 0);
});
e.preventDefault();
});
<form id="form">
<input id="input" type="text" />
<button type="submit">Submit</button>
</form>
<ul id="saved-list"></ul>
<ul id="done-list"></ul>
WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET
You need to use event.stopPropagation() at the end of your deleteButton.addEventListener. It will fix your problem.
What is happening with your code is as below.
When you click on x button it will invoke click event for that button as well as click event of li.
So, first it will invoke click event of x & from deleteButton.addEventListener it will remove your li.
Then it will invoke click event of li and as per code from li.addEventListener it will move li to other ul.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
So if you use event.stopPropagation() in your deleteButton.addEventListener then it will prevent further invoke of li click event and it won't be able to add li again to other ul.
Try code below.
const form = document.querySelector('#form');
const savedList = document.querySelector("#saved-list");
const doneList = document.querySelector("#done-list");
form.addEventListener('submit', (e) => {
const li = document.createElement('li');
li.innerText = document.getElementById('input').value;
li.id = li.innerText;
li.isDone = false;
li.isDone ? doneList.append(li) : savedList.append(li);
const deleteButton = document.createElement('button');
deleteButton.innerText = 'x';
deleteButton.id = 'deleteButton';
li.append(deleteButton);
li.addEventListener('click', () => {
li.isDone ? (li.isDone = false) : (li.isDone = true);
li.isDone ? doneList.append(li) : savedList.append(li);
});
deleteButton.addEventListener('click', function(event) {
const targetToDo = event.currentTarget.parentNode;
console.log(targetToDo.parentNode);
// targetToDo.parentNode.remove(targetToDo);
targetToDo.remove();
// Add below line.
event.stopPropagation();
});
e.preventDefault();
});
<form id="form">
<input id="input" type="text" />
<button type="submit">Submit</button>
</form>
<ul id="saved-list"></ul>
<ul id="done-list"></ul>
I would imagine that this is a very simple code solution to fix but I haven't managed to get it functional.
To give you some perspective, what I currently have done is a form formatting with intl tel input and then I have included the following code(which works great!) inorder to validate the input;
<span id="valid-msg" class="hide">✓Valid number</span>
<span id="error-msg" class="hide"></span>
<style>
.hide {
display: none;
}
#valid-msg {
color: #2b9348;
}
#error-msg {
color: #C31014;
}
<style>
<!--for validation-->
<script>
var input = document.querySelector("#phone"),
errorMsg = document.querySelector("#error-msg"),
validMsg = document.querySelector("#valid-msg");
var updateInputValue = function (event) {
dialCode.value = "+" + iti.getSelectedCountryData().dialCode;
};
input.addEventListener('input', updateInputValue, false);
input.addEventListener('countrychange', updateInputValue, false);
var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
var reset = function() {
input.classList.remove("error");
errorMsg.innerHTML = "";
errorMsg.classList.add("hide");
validMsg.classList.add("hide");
};
input.addEventListener('blur', function() {
reset();
if (input.value.trim()) {
if (iti.isValidNumber()) {
validMsg.classList.remove("hide");
} else {
input.classList.add("error");
var errorCode = iti.getValidationError();
errorMsg.innerHTML = errorMap[errorCode];
errorMsg.classList.remove("hide");
}
}
});
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
</script>
What I'm looking to do is change the style of the submit button if the phone number is valid, I thought this might be done by checking if the #valid-msg span was visible or didn't have a class.
Here is what I have tried:
<script>
document.addEventListener('DOMContentLoaded', () => {
const phoneInput = document.querySelector('#phone');
const validMsg = document.querySelector('#valid-msg');
const targetFormButton = document.querySelector('#form-submit');
if (!phoneInput || !targetFormButton || !validInput) return;
phoneInput.addEventListener('input', () => {
const isValid = validMsg.className !== 'hide';
targetFormButton.classList[isValid ? 'remove' : 'add']('invalid');
targetFormButton.classList[isValid ? 'add' : 'remove']('valid');
});
});
</script> ```
If anyone have suggestions they would be greatly appreciated!
If your validator works correctly, then what you need is a conditional formatting via class toggle:
const btnSubmit = document.querySelector('#form-submit')
const phoneInput = document.getElementById('phone')
const form = document.getElementById('form')
// simplified validation: valid if more
// than 3 characters long
const validator = (val) => {
if (val.length < 3) return false
return true
}
// general function to change classes (add & remove)
// on an element (el)
const validClassToggle = (addClass, removeClass) => (el) => {
el.classList.add(addClass)
el.classList.remove(removeClass)
}
// creating setInvalid & setValid functions
const setInvalid = validClassToggle('invalid', 'valid')
const setValid = validClassToggle('valid', 'invalid')
phoneInput.addEventListener('input', function(e) {
validator(e.target.value) ?
setValid(btnSubmit) :
setInvalid(btnSubmit)
})
form.addEventListener('submit', function(e) {
e.stopPropagation()
e.preventDefault()
if (validator(phoneInput.value)) {
console.log("form submitted")
} else {
console.log("form not submitted")
}
})
.valid {
background-color: green;
color: white;
}
.invalid {
background-color: red;
color: white;
}
<form id="form">
<input id="phone" type="text" /><br />
<button id="form-submit" type="submit">SUBMIT</button>
</form>
After reading the title, you might have known the problem. Let me elaborate: when I add an element using JavaScript, I can't do anything with that element. When the element is clicked, the element is supposed to do a certain function, but when I add the new element, just does nothing.
Code:
<div class="progress-bar">
<div class="progress-bar-title">Progress:</div>
<div class="progress-bar-outline">
<div class="progress-bar-percentage"></div>
</div>
</div>
<div class="list" id="listSection">
<ul>
<li>one</li>
<li>two</li>
<li>test</li>
</ul>
</div>
<div class="new-button">Create</div>
<div class="new-section">
<input type="text" class="text-box" placeholder="Name for this card">
</div>
//creates a new element
newText.addEventListener("keyup", (event) => {
if (newText.value != "") {
if (event.keyCode === 13) {
let list_section = document.getElementById("listSection");
let name = newText.value;
let new_li = document.createElement("li");
new_li.innerHTML = name;
list_section.querySelector("ul").appendChild(new_li);
let divs = document.querySelectorAll("div");
newSection.classList.remove("opened");
divs.forEach((div) => {
if (div != newSection) {
div.style.transition = "all 0.5s ease";
div.style.filter = "";
}
});
}
}
});
//looping through each list to add that function
list_Sections.forEach((list) => {
totalListCount++;
list.addEventListener("click", () => {
list.classList.toggle("checked"); //this function doesn't apply to the newly created element
if (!list.classList.contains("checked")) {
listCompleted--;
} else {
listCompleted++;
}
average = (listCompleted / totalListCount) * 500;
percentage.style.width = average;
});
});
Ask you have any questions about this topic.
Thanks for the help!
Whenever a new element is added, your code should attach the event listener to that new element. Try nesting your the code related to .addEventListner() inside the keyup event listener code.
newText.addEventListener("keyup", (event) => {
if (newText.value != "") {
if (event.keyCode === 13) {
let list_section = document.getElementById("listSection");
let name = newText.value;
let new_li = document.createElement("li");
new_li.innerHTML = name;
list_section.querySelector("ul").appendChild(new_li);
let divs = document.querySelectorAll("div");
newSection.classList.remove("opened");
divs.forEach((div) => {
if (div != newSection) {
div.style.transition = "all 0.5s ease";
div.style.filter = "";
}
});
//looping through each list to add that function
list_Sections.forEach((list) => {
totalListCount++;
list.addEventListener("click", () => {
list.classList.toggle("checked");
if (!list.classList.contains("checked")) {
listCompleted--;
} else {
listCompleted++;
}
average = (listCompleted / totalListCount) * 500;
percentage.style.width = average;
});
});
}
}
});
So I have a calculator with an error message that displays, if they press the "calculate" button if the input is NaN. The error message keeps getting created everytime the user presses calculate. How do i make it so it only shows even after pressing "calculate" multiple times?
function displayErr() {
const formBox = document.querySelector("form");
const errorBox = document.createElement("div");
errorBox.className = "errorBox";
const errorText = document.createTextNode("Those are not numbers!");
errorBox.appendChild(errorText);
formBox.appendChild(errorBox);
}
if ((isNaN(billInput)) || (isNaN(peopleAmount)) || (billInput === "") || (peopleAmount === "")) {
displayErr();
}
The most straightforward way is to check if the element already exists.
function displayErr() {
// Get error element
const errorElement = document.getElementsByClassName('errorBox');
// If it already exists
if (errorElement && errorElement.length > 0) {
// Dont add another one
return;
}
// Add new errorBox
const formBox = document.querySelector("form");
const errorBox = document.createElement("div");
errorBox.className = "errorBox";
const errorText = document.createTextNode("Those are not numbers!");
errorBox.appendChild(errorText);
formBox.appendChild(errorBox);
}
Another option would to be using css classes to 'hide' the element;
Always render the element, but hide it with display: none
In the displayErr(), make the element visible with something like document.getElementsByClassName('errorBox')[0].style.display = block;
a better way of doing this is
to show and hide the element using CSS classes
create the element and hide it using
display: none;
and show it by adding a class to the element
display: block;
const element = document.getElementById("myDIV");
const button = document.getElementById("btn");
button.addEventListener("click", () => element.classList.toggle("show"));
#myDIV {
display: none;
}
.show {
display: block !important;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id="btn">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
</body>
</html>
For what it's worth, here is a pure JavaScript example of a show/hide interpretation:
function CheckInput() {
const billInput = document.getElementById("b").value;
const peopleAmount = document.getElementById("p").value;
if ((isNaN(billInput)) || (isNaN(peopleAmount)) || (billInput === "") || (peopleAmount === "")) {
showErr();
}
else{
hideErr();
}
}
function hideErr(){
console.log("hide");
const el = document.getElementById("error");
el.style.display = "none";
}
function showErr(){
console.log("show");
const el = document.getElementById("error");
el.style.display = "block";
el.innerHTML = "Hey sorry wrong input";
}
window.onload = function() {
hideErr();
}
You can see the HTML and try the code here: https://jsfiddle.net/0mrx5ev7/
You can pass a parameter to your displayErr function, then use it to set the hidden HTML attribute and textContent of a single target div, identified by its HTML id.
This way, the functionality becomes reusable, and you can set/unset the error message whenever you need.
const input = document.querySelector('#input')
const errDisplay = document.querySelector('#err-display')
function displayErr(msg) {
errDisplay.textContent = msg || ''
errDisplay.hidden = msg ? null : 'hidden'
}
input.addEventListener('input', () => {
displayErr(isNaN(input.value) ? "Not a number" : null)
})
#err-display {
font-family: sans-serif;
background: red;
color: white;
margin: .5em 0;
padding: .5em;
}
<input id='input' placeholder='Start typing'>
<div id='err-display' hidden></div>
try to use a counter. like if int i == 0 --> do the function. i would do so
int i = 0;
function displayErr() {
const formBox = document.querySelector("form");
const errorBox = document.createElement("div");
errorBox.className = "errorBox";
const errorText = document.createTextNode("Those are not numbers!");
errorBox.appendChild(errorText);
formBox.appendChild(errorBox);
}
if ((isNaN(billInput)) && i == 0 || (isNaN(peopleAmount)) && i == 0 ||
(billInput === "") && i == 0 || (peopleAmount === "") && i == 0)
{
displayErr();
i += 1;
}
now it will display an error only once, because i is never going to be 0 anymore
Im working on a checklist chrome app for myself and would love your help. Basically, I cant figure out how to save a checkbox status. If I check a box and refresh the page, I would like it to stay checked. But I cant seem to code that. Any ideas how to do that? Thank you!!
Edit: I added the html, it gives me the message that my post is mostly code and that I need to add some text, so here I am just writing some more to fulfil this requirement. There is no need reading this. Thanks for the help and sorry for the late edit
function get_todos() {
var todos = new Array;
var todos_str = localStorage.getItem('todo');
if (todos_str !== null) {
todos = JSON.parse(todos_str);
}
return todos;
}
function add() {
var task = document.getElementById('task').value;
var todos = get_todos();
todos.push(task);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function remove() {
var id = this.getAttribute('id');
var todos = get_todos();
todos.splice(id, 1);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i<todos.length; i++) {
html += '<li>' + '<input type="checkbox" id="checkbox">' + todos[i] + '<button class="remove" id="' + i + '">delete</button></li>' ;
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
document.getElementById('add').addEventListener('click', add);
show();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<style>
html,body,h1,h3,h4,h6 {font-family: "Roboto";font-size: 24px; sans-serif}
h2 {font-family: "Roboto";font-size: 36px; sans-serif}
h5 {font-family: "Roboto";font-size: 28px; sans-serif}
</style>
<input id="task"><button id="add">Add</button>
<hr>
<div id="todos"></div>
<script src="todo.js"></script>
</body>
</html>
Seeing as no one else has provided an answer, I thought I'd throw in my potential solution, I went with a functional style because why not, it's simple, easy to read, etc...
PS
I included the fallback variable because on Stack Overflow, you can't access local storage when running a snippet.
let fallback = [];
const $e = query => document.querySelector(query);
// Return a todo list.
const getToDoList = () => {
let data = null;
try {
data = JSON.parse(localStorage.getItem('todo'));
} catch (e) {
data = fallback;
}
return data == null || Array.isArray(data) == false ? [] : data;
};
// Set the todo list.
const setToDoList = (data) => {
try {
localStorage.setItem('todo', JSON.stringify(data));
} catch (e) {
fallback = data;
}
};
// Add a task to the todo list.
const addToDo = () => {
const array = getToDoList();
array.push({value: $e("#task").value, checked: false});
setToDoList(array);
};
// Remove a task from the todo list.
const removeToDo = index => {
const array = getToDoList();
array.splice(index, 1);
setToDoList(array);
};
// Allow for the ability to remove an item from the todo list & other stuff..
const dispatchListEvents = () => {
document.querySelectorAll('#app ul li span').forEach(span => {
span.onclick = () => {
removeToDo(span.parentElement.getAttribute('data-index'));
render();
}
});
document.querySelectorAll('#app ul li input').forEach(input => {
input.onclick = () => {
const array = getToDoList();
const object = array[input.parentElement.getAttribute('data-index')];
object.checked = ! object.checked;
setToDoList(array);
render();
}
});
};
// Render the todo list.
const render = () => {
let index = 0;
const template = item => `<li data-index="${index++}">` +
`<input type="checkbox" ${item.checked ? 'checked' : ''} />` +
`${item.value} <span>X</span></li>`;
const re = new RegExp('</li>,', 'g'), replacement = '</li>';
const html = `<ul>${getToDoList().map(i => template(i))}</ul>`;
$e("#app").innerHTML = `${html.replace(re, replacement)}`;
dispatchListEvents();
};
// Allow the user to add a task to the todo list.
const addToListClickHandler = () => {
let result = $e("#task").value.replace(/\ /g, '').length > 0 ? addToDo() : null;
$e("#task").value = null; // Always null as addToDo returns null.
render();
};
// The function that will be fired when the DOM is ready.
const ready = () => {
render(); // Initial render.
$e("#addToList").addEventListener('click', addToListClickHandler);
};
// An insanely lazy implementation of $(document).ready.
const delay = 250;
const fakeOnReady = setTimeout(ready, delay);
body {
font-family: Arial, Helvetica, sans-serif;
}
#app ul li {
max-width: 150px;
}
#app ul li span {
float: right;
color: red;
}
#app ul li span:hover {
cursor: pointer;
}
<h1>To Do List</h1>
<section>
<h2>Add Task</h2>
<input id="task" placeholder="Task..."/>
<input type="button" id="addToList" value="Add"/>
</section>
<hr/>
<section>
<h2>Tasks</h2>
<div id="app">
<!-- Area for the DHTML. -->
</div>
</section>