- 목차
- 1. Adding Entries
- 2. Deleting Entries
- 3. Done Marking
- 4. Category
- 5. Filter by category
- 6. Auto-update Options
- 7. localStorage
- 8. Object
- change Event Listener
- innerHTML +=
- createElement
- appendChild
- doubleclick event
- remove()
- Material Icons
- ref : https://material.io/
- className
- Closures
- text-decoration : line-through;
- JS technique : flag
- js classList API(strike)
function done(){
if(flag){
//this.style.textDecoration = "line-through";
this.classList.add("strike");
flag = !flag;
}else{
//this.style.textDecoration = "none";
this.classList.remove("strike");
flag = !flag;
}
}
- HTML
input
checkbox - CSS : checked
input:checked + span{
text-decoration: line-through;
}
- CSS ~ and +
- getElementById
- new row in table
//add a new row
let table = document.getElementById("todoTable");
let trElem = document.createElement("tr");
table.appendChild(trElem);
//checkbox cell
let checkboxElem = document.createElement("input");
checkboxElem.type= "checkbox";
checkboxElem.addEventListener("click", done, false);
let tdElem1 = document.createElement("td");
tdElem1.appendChild(checkboxElem);
trElem.appendChild(tdElem1);
//to-do list cell
let tdElem2 = document.createElement("td");
tdElem2.innerText = inputValue;
trElem.appendChild(tdElem2);
//category cell
let tdElem3 = document.createElement("td");
tdElem3.innerText = inputValue2;
trElem.appendChild(tdElem3);
//delete cell
let spanElem = document.createElement("span");
spanElem.innerText = "remove_circle_outline";
spanElem.className = "material-icons";
spanElem.addEventListener("click", deleteItem, false);
let tdElem4 = document.createElement("td");
tdElem4.appendChild(spanElem);
trElem.appendChild(tdElem4);
- classList.toggle()
checkboxElem.addEventListener("click", done, false);
function done(){
trElem.classList.toggle("strike");
}
- datalist
<p><input type = "text" placeholder="카테고리 입력" list ="categoryList"><p>
<datalist id = "categoryList">
<option value="Personal"></option>
<option value="work"></option>
</datalist>
<select>
<select id="categoryFilter">
<option value = "Personal">Personal</option>
<option value = "Work">Work</option>
</select>
- Element.style.display
function filterEntries(){
let rows = document.getElementsByTagName("tr");
for (let i = 1; i <rows.length; i++){
let category = rows[i].getElementsByTagName("td")[2].innerText;
if(category == selectElem.value ){
rows[i].style.display = "";
}else{
rows[i].style.display = "none";
}
}
}
- Es6 Array.from()
- Es6 Array.prototype.forEach()
function filterEntries(){
let selection = selectElem.value;
if(selection =="total"){
let rows = document.getElementsByTagName("tr");
Array.from(rows).forEach((row, index)=>{
row.style.display = "";
});
}else{
let rows = document.getElementsByTagName("tr");
Array.from(rows).forEach((row, index)=>{
if(index==0){
return;
}
let category = row.getElementsByTagName("td")[2].innerText;
if(category == selectElem.value ){
row.style.display = "";
}else{
row.style.display = "none";
}
});
}
}
- add option
let newOptionElem = document.createElement('option');
newOptionElem.value = option;
newOptionElem.innerText= option;
selectElem.appendChild(newOptionElem);
- Array push()
- Array incudes()
- if you add a category with the same name as it was originally
if(!options.includes(category)){
options.push(category);
}
- new Set()
- not allows duplicate
- faster than using includes (running just one)
let optionSet = new Set(options);
- for of loop
for(let option of optionSet){
let newOptionElem = document.createElement('option');
newOptionElem.value = option;
newOptionElem.innerText= option;
selectElem.appendChild(newOptionElem);
}
- const
const DEFAULT_OPTION = "Category";
- localStorage.setItem()
function save(){
localStorage.setItem("todoList", todoList);
}
- localStorage.getItem()
- JSON.stringify()
function save(){
let stringified = JSON.stringify(todoList);
localStorage.setItem("todoList", stringified);
}
function load(){
todoList = localStorage.getItem("todoList");
console.log(typeof todoList);
if(todoList ==null)
todoList = [];
}
- JSON.parse()
function load(){
let retrieved = localStorage.getItem("todoList");
todoList = JSON.parse(retrieved);
console.log(typeof todoList);
if(todoList ==null)
todoList = [];
}
- object.key VS object["key"]
- push
todoList.push({
todo: inputValue,
category: inputValue2,
});
- .key
function renderRows(){
todoList.forEach(todoObj => {
let todoEntry = todoObj.todo;
let todoCategory = todoObj.category;
renderRow(todoEntry, todoCategory);
})
}
- ["key"]
function renderRows(){
todoList.forEach(todoObj => {
let todoEntry = todoObj["todo"];
let key = "category";
let todoCategory = todoObj[key];
renderRow(todoEntry, todoCategory);
})
}
- for in loop
function renderRows(){
todoList.forEach(todoObj => {
for (let keys in todoObj){
console.log(`${keys} -> ${todoObj[keys]}`)
}
...
- array is object in JS
- object destructuring