Hi I am Nullzzing.
Today's coding is to create a "to do list".
Many developers have posted code to create a "to do list", but I did it a little differently.
I'm going to make it go to the "do list" when you check the checkbox.
just like this!
Let's take a look at the html code first.
<body>
<div style="display:flex;align-items:center;justify-content:center;">
<input type="text" id="work"/><button onclick="add()">add</button>
</div>
<div style="display:flex; justify-content: space-evenly;">
<div style="display: flex; flex-direction: column; align-items: center;
justify-content: center;" >
<h1>To</h1>
<ol>
<li>
<label>
<input type="checkbox" onclick="check(this)"/>
study
</label>
</li>
</ol>
</div>
<div style="display: flex; flex-direction: column; align-items:
center; justify-content: center;">
<h1>Do</h1>
<ol>
</ol>
</div>
</div>
</body>I added an input at the top to make it possible to add todos.
And you need to add "add()" to the onclick property so that the added todo is added to To.
Now the added list will be added to To below.
The funny thing is from now on. Now, if you check from to here, the content should move to do.
Let's take a look at the JavaScript code
function add(){
let work = document.getElementById('work').value;
console.log(work);
let toDo = document.createElement('li');
let label = document.createElement('label');
let input = document.createElement('input');
let textData = document.createTextNode(work);
console.log(textData);
input.type='checkbox';
// input.setAttribute('onclick','check(this)'); bad case
input.addEventListener('click',()=>check(input)); //best case
label.appendChild(input);
label.appendChild(textData);
toDo.appendChild(label);
let toDoList = document.querySelector(newFunction())
toDoList.appendChild(toDo);
console.log(label);
console.log(input);
function newFunction() {
return 'div>div:nth-of-type(1)>ol';
}
}
function check(elem){
if(elem.checked === true){
document.querySelector('div>div:nth-of-type(2)>ol')
.appendChild(elem.parentElement.parentElement);
}else if(elem.checked === false){
document.querySelector('div>div:nth-of-type(1)>ol')
.appendChild(elem.parentElement.parentElement);
}
}Use a function to move the list according to whether or not it is checked.
If you add css here, you can complete your own wonderful todolist.
